@landform.io/sdk 0.1.2

package/dist/chunk-WHV333XL.cjs

@@ -0,0 +1,1684 @@
+'use strict';
+
+var chunkWIFNU3FA_cjs = require('./chunk-WIFNU3FA.cjs');
+var React2 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+
+var FormContext = React2.createContext(null);
+function useFormContext() {
+  const ctx = React2.useContext(FormContext);
+  if (!ctx) {
+    throw new Error("useFormContext must be used within a FormProvider");
+  }
+  return ctx;
+}
+function FormProvider({ children, ...options }) {
+  const form = chunkWIFNU3FA_cjs.useForm(options);
+  const contextValue = React2.useMemo(
+    () => ({
+      ...form,
+      content: options.content,
+      settings: options.settings
+    }),
+    [form, options.content, options.settings]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkWIFNU3FA_cjs.ThemeContext.Provider, { value: options.theme, children: /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: contextValue, children }) });
+}
+function WelcomeScreen({ screen, onStart }) {
+  const { title, properties, attachment } = screen;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lf-screen", children: [
+    attachment && attachment.type === "image" && /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: attachment.href,
+        alt: attachment.properties?.description || "",
+        style: { maxWidth: "100%", maxHeight: "300px", marginBottom: "2rem" }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "lf-screen-title", children: title }),
+    properties.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lf-screen-description", children: properties.description }),
+    properties.showButton && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "lf-button", onClick: onStart, children: properties.buttonText || "Start" })
+  ] });
+}
+function ThankYouScreen({ screen }) {
+  const { title, properties, attachment } = screen;
+  const handleButtonClick = () => {
+    switch (properties.buttonMode) {
+      case "reload":
+        window.location.reload();
+        break;
+      case "redirect":
+        if (properties.redirectUrl) {
+          window.location.href = properties.redirectUrl;
+        }
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lf-screen", children: [
+    attachment && attachment.type === "image" && /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: attachment.href,
+        alt: attachment.properties?.description || "",
+        style: { maxWidth: "100%", maxHeight: "300px", marginBottom: "2rem" }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "lf-screen-title", children: title }),
+    properties.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lf-screen-description", children: properties.description }),
+    properties.showButton && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "lf-button", onClick: handleButtonClick, children: properties.buttonText || "Done" })
+  ] });
+}
+function QuestionHeader({
+  field,
+  questionNumber,
+  showQuestionNumber
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "var(--lf-spacing-question)" }, children: [
+    showQuestionNumber && questionNumber !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "lf-question-description",
+        style: { display: "block", marginBottom: "0.25rem", fontSize: "0.875rem" },
+        children: questionNumber
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "lf-question-title", children: [
+      field.title,
+      field.validations?.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lf-required", style: { marginLeft: "0.25rem" }, children: "*" })
+    ] }),
+    field.description && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: "lf-question-description",
+        style: { marginTop: "0.5rem", fontSize: "1rem" },
+        children: field.description
+      }
+    )
+  ] });
+}
+function MultipleChoice({
+  field,
+  value,
+  error,
+  onChange,
+  onNext,
+  showQuestionNumber,
+  questionNumber,
+  showKeyHints,
+  systemMessages
+}) {
+  const theme = chunkWIFNU3FA_cjs.useThemeContext();
+  const selectedValues = value || [];
+  const { choices, allowMultipleSelection } = field.properties;
+  const isCardStyle = theme.componentVariants?.choiceStyle === "card";
+  const choiceLayout = theme.componentVariants?.choiceLayout || "single-column";
+  const choiceIndicator = theme.componentVariants?.choiceIndicator || "checkmark";
+  const choiceContainerMaxWidth = theme.componentVariants?.choiceContainerMaxWidth;
+  const handleChoiceClick = (choiceRef) => {
+    if (allowMultipleSelection) {
+      const newValues = selectedValues.includes(choiceRef) ? selectedValues.filter((v) => v !== choiceRef) : [...selectedValues, choiceRef];
+      onChange(newValues);
+    } else {
+      const newValue = [choiceRef];
+      onChange(newValue);
+      onNext(newValue);
+    }
+  };
+  React2__default.default.useEffect(() => {
+    const handleKeyDown = (e) => {
+      const key = e.key.toUpperCase();
+      const index = key.charCodeAt(0) - 65;
+      if (index >= 0 && index < choices.length) {
+        handleChoiceClick(choices[index].ref);
+      }
+    };
+    if (showKeyHints) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [choices, showKeyHints, selectedValues]);
+  const containerStyle = choiceLayout === "single-column" ? {
+    display: "flex",
+    flexDirection: "column",
+    gap: "var(--lf-spacing-option)"
+  } : {
+    display: "grid",
+    gridTemplateColumns: choiceLayout === "two-column" ? "repeat(2, 1fr)" : "repeat(auto-fit, minmax(160px, 1fr))",
+    gap: "var(--lf-spacing-option)",
+    maxWidth: choiceContainerMaxWidth || void 0,
+    margin: choiceContainerMaxWidth ? "0 auto" : void 0
+  };
+  const renderIndicator = (isSelected) => {
+    if (choiceIndicator === "none") {
+      return null;
+    }
+    if (choiceIndicator === "arrow") {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lf-choice-indicator", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "9", fill: isSelected ? "#111113" : "white" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M8 5.5L11.5 9L8 12.5",
+            stroke: isSelected ? "white" : "black",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ] }) });
+    }
+    if (choiceIndicator === "radio") {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lf-choice-indicator", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "8", stroke: isSelected ? "var(--lf-color-primary)" : "#E5E7EB", strokeWidth: "2", fill: "none" }),
+        isSelected && /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "5", fill: "var(--lf-color-primary)" })
+      ] }) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lf-choice-indicator", children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "3",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+      }
+    ) });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lf-field", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      QuestionHeader,
+      {
+        field,
+        questionNumber,
+        showQuestionNumber
+      }
+    ),
+    allowMultipleSelection && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lf-field-hint", style: { marginBottom: "var(--lf-spacing-option)", opacity: 0.7 }, children: systemMessages?.multipleSelectionHint || "Choose as many as you like" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle, children: choices.map((choice, index) => {
+      const isSelected = selectedValues.includes(choice.ref);
+      if (isCardStyle) {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleChoiceClick(choice.ref),
+            className: `lf-choice-card ${isSelected ? "lf-choice-card-selected" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children: choice.label }),
+              renderIndicator(isSelected)
+            ]
+          },
+          choice.ref
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleChoiceClick(choice.ref),
+          className: `lf-choice ${isSelected ? "lf-choice-selected" : ""}`,
+          children: [
+            showKeyHints && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lf-key-hint", children: String.fromCharCode(65 + index) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1 }, children: choice.label }),
+            isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                width: "20",
+                height: "20",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "3",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                style: { color: "var(--lf-color-primary)" },
+                children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+              }
+            )
+          ]
+        },
+        choice.ref
+      );
+    }) }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${field.ref}-error`, className: "lf-error", children: error })
+  ] });
+}
+function NumberField({
+  field,
+  value,
+  error,
+  onChange,
+  onNext,
+  showQuestionNumber,
+  questionNumber
+}) {
+  const { onKeyDown } = chunkWIFNU3FA_cjs.useField({
+    field,
+    value,
+    error,
+    onChange,
+    onNext
+  });
+  const handleChange = (e) => {
+    const val = e.target.value;
+    if (val === "") {
+      onChange("");
+    } else {
+      const num = parseFloat(val);
+      if (!isNaN(num)) {
+        onChange(num);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lf-field", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      QuestionHeader,
+      {
+        field,
+        questionNumber,
+        showQuestionNumber
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "number",
+        value: value !== void 0 ? String(value) : "",
+        onChange: handleChange,
+        onKeyDown,
+        placeholder: field.properties?.placeholder,
+        min: field.validations?.minValue,
+        max: field.validations?.maxValue,
+        className: "lf-input-underline",
+        "aria-invalid": !!error,
+        "aria-describedby": error ? `${field.ref}-error` : void 0
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${field.ref}-error`, className: "lf-error", children: error })
+  ] });
+}
+function OpinionScale({
+  field,
+  value,
+  error,
+  onChange,
+  onNext,
+  showQuestionNumber,
+  questionNumber
+}) {
+  const { steps, startAtOne, labels } = field.properties;
+  const currentValue = value;
+  const startValue = startAtOne ? 1 : 0;
+  const handleClick = (rating) => {
+    onChange(rating);
+    onNext(rating);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lf-field", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      QuestionHeader,
+      {
+        field,
+        questionNumber,
+        showQuestionNumber
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            display: "flex",
+            gap: "0.5rem",
+            flexWrap: "wrap"
+          },
+          children: Array.from({ length: steps }, (_, i) => startValue + i).map((num) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleClick(num),
+              className: `lf-scale-button ${currentValue === num ? "lf-scale-button-selected" : ""}`,
+              children: num
+            },
+            num
+          ))
+        }
+      ),
+      (labels.left || labels.right) && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            marginTop: "0.75rem",
+            fontSize: "0.875rem",
+            color: "var(--lf-color-placeholder)"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.left }),
+            labels.center && /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.center }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.right })
+          ]
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${field.ref}-error`, className: "lf-error", children: error })
+  ] });
+}
+var SHAPES = {
+  star: (filled) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }) }),
+  heart: (filled) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" }) }),
+  thumbsup: (filled) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }) }),
+  trophy: (filled) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9H4.5a2.5 2.5 0 0 1 0-5H6" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 9h1.5a2.5 2.5 0 0 0 0-5H18" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 22h16" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 2H6v7a6 6 0 0 0 12 0V2Z" })
+  ] }),
+  crown: (filled) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m2 4 3 12h14l3-12-6 7-4-7-4 7-6-7zm3 16h14" }) })
+};
+function Rating({
+  field,
+  value,
+  error,
+  onChange,
+  onNext,
+  showQuestionNumber,
+  questionNumber
+}) {
+  const [hoverValue, setHoverValue] = React2.useState(null);
+  const { steps, shape } = field.properties;
+  const currentValue = value || 0;
+  const displayValue = hoverValue !== null ? hoverValue : currentValue;
+  const handleClick = (rating) => {
+    onChange(rating);
+    onNext(rating);
+  };
+  const ShapeComponent = SHAPES[shape] || SHAPES.star;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lf-field", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      QuestionHeader,
+      {
+        field,
+        questionNumber,
+        showQuestionNumber
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: "0.5rem"
+        },
+        onMouseLeave: () => setHoverValue(null),
+        children: Array.from({ length: steps }, (_, i) => i + 1).map((rating) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleClick(rating),
+            onMouseEnter: () => setHoverValue(rating),
+            className: `lf-rating-star ${rating <= displayValue ? "lf-rating-star-active" : ""}`,
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: "0.25rem",
+              width: "2.5rem",
+              height: "2.5rem"
+            },
+            "aria-label": `Rate ${rating} out of ${steps}`,
+            children: ShapeComponent(rating <= displayValue)
+          },
+          rating
+        ))
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${field.ref}-error`, className: "lf-error", children: error })
+  ] });
+}
+function Statement({
+  field,
+  onNext,
+  showQuestionNumber,
+  questionNumber
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lf-field", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      QuestionHeader,
+      {
+        field,
+        questionNumber,
+        showQuestionNumber
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "lf-button", onClick: onNext, children: field.properties.buttonText || "Continue" })
+  ] });
+}
+function TextField({
+  field,
+  value,
+  error,
+  onChange,
+  onNext,
+  showQuestionNumber,
+  questionNumber
+}) {
+  const { getInputProps, getTextareaProps } = chunkWIFNU3FA_cjs.useField({
+    field,
+    value,
+    error,
+    onChange,
+    onNext
+  });
+  const isLongText = field.type === "long_text";
+  const inputType = field.type === "email" ? "email" : field.type === "website" ? "url" : "text";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lf-field", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      QuestionHeader,
+      {
+        field,
+        questionNumber,
+        showQuestionNumber
+      }
+    ),
+    isLongText ? /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ...getTextareaProps(),
+        className: "lf-input",
+        rows: 4,
+        style: { resize: "vertical", minHeight: "120px" }
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps(), type: inputType, className: "lf-input-underline" }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${field.ref}-error`, className: "lf-error", children: error })
+  ] });
+}
+function YesNo({
+  field,
+  value,
+  error,
+  onChange,
+  onNext,
+  showQuestionNumber,
+  questionNumber,
+  showKeyHints
+}) {
+  const currentValue = value;
+  const handleClick = (answer) => {
+    onChange(answer);
+    onNext(answer);
+  };
+  React2__default.default.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key.toLowerCase() === "y") {
+        handleClick(true);
+      } else if (e.key.toLowerCase() === "n") {
+        handleClick(false);
+      }
+    };
+    if (showKeyHints) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [showKeyHints]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lf-field", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      QuestionHeader,
+      {
+        field,
+        questionNumber,
+        showQuestionNumber
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          gap: "var(--lf-spacing-option)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleClick(true),
+              className: `lf-choice ${currentValue === true ? "lf-choice-selected" : ""}`,
+              style: { flex: 1 },
+              children: [
+                showKeyHints && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lf-key-hint", children: "Y" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Yes" }),
+                currentValue === true && /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "3",
+                    style: { color: "var(--lf-color-primary)", marginLeft: "auto" },
+                    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleClick(false),
+              className: `lf-choice ${currentValue === false ? "lf-choice-selected" : ""}`,
+              style: { flex: 1 },
+              children: [
+                showKeyHints && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lf-key-hint", children: "N" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "No" }),
+                currentValue === false && /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: "20",
+                    height: "20",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "3",
+                    style: { color: "var(--lf-color-primary)", marginLeft: "auto" },
+                    children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${field.ref}-error`, className: "lf-error", children: error })
+  ] });
+}
+function FieldRenderer({
+  field,
+  value,
+  error,
+  onChange,
+  onNext,
+  showQuestionNumber,
+  questionNumber,
+  showKeyHints,
+  systemMessages
+}) {
+  const commonProps = {
+    value,
+    error,
+    onChange,
+    onNext,
+    showQuestionNumber,
+    questionNumber
+  };
+  switch (field.type) {
+    case "short_text":
+    case "long_text":
+    case "email":
+    case "website":
+      return /* @__PURE__ */ jsxRuntime.jsx(TextField, { field, ...commonProps });
+    case "number":
+      return /* @__PURE__ */ jsxRuntime.jsx(NumberField, { field, ...commonProps });
+    case "multiple_choice":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        MultipleChoice,
+        {
+          field,
+          ...commonProps,
+          showKeyHints,
+          systemMessages
+        }
+      );
+    case "rating":
+      return /* @__PURE__ */ jsxRuntime.jsx(Rating, { field, ...commonProps });
+    case "opinion_scale":
+      return /* @__PURE__ */ jsxRuntime.jsx(OpinionScale, { field, ...commonProps });
+    case "yes_no":
+      return /* @__PURE__ */ jsxRuntime.jsx(YesNo, { field, ...commonProps, showKeyHints });
+    case "statement":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Statement,
+        {
+          field,
+          onNext,
+          showQuestionNumber,
+          questionNumber
+        }
+      );
+    // For field types not yet implemented, show a basic input
+    case "phone_number":
+    case "date":
+    case "dropdown":
+    case "picture_choice":
+    case "ranking":
+    case "nps":
+    case "legal":
+    case "file_upload":
+    case "contact_info":
+    case "payment":
+    case "group":
+    case "matrix":
+    case "address":
+    case "slider":
+    case "signature":
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lf-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          QuestionHeader,
+          {
+            field,
+            questionNumber,
+            showQuestionNumber
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                onNext();
+              }
+            },
+            className: "lf-input-underline",
+            placeholder: `Enter your ${field.type.replace(/_/g, " ")}`
+          }
+        ),
+        error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${field.ref}-error`, className: "lf-error", children: error })
+      ] });
+  }
+}
+function NavigationControls({ onNext, onPrevious }) {
+  const { canGoBack, canGoNext, isSubmitting, next, previous, settings } = useFormContext();
+  const theme = chunkWIFNU3FA_cjs.useThemeContext();
+  const navVisibility = theme.componentVariants?.navigationVisibility || "always";
+  if (navVisibility === "hidden" || navVisibility === "auto-advance") {
+    return null;
+  }
+  const handleNext = () => onNext ? onNext() : next();
+  const handlePrevious = () => onPrevious ? onPrevious() : previous();
+  const confirmText = settings.systemMessages?.confirmButtonText || "OK";
+  const enterHint = settings.systemMessages?.pressEnterText || "press Enter";
+  const isBottomBar = theme.componentVariants?.navigationLayout === "bottom-bar";
+  if (isBottomBar) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lf-navigation-bottom-bar", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "lf-nav-btn-back",
+          onClick: handlePrevious,
+          disabled: !canGoBack,
+          "aria-label": "Previous question",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" })
+              }
+            ),
+            "Back"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "lf-nav-btn-next",
+          onClick: handleNext,
+          disabled: isSubmitting,
+          "aria-label": "Next question",
+          children: [
+            "Next",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14M12 5l7 7-7 7" })
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lf-navigation", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "lf-navigation-button",
+        onClick: handlePrevious,
+        disabled: !canGoBack,
+        "aria-label": "Previous question",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 18l-6-6 6-6" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: "lf-button",
+        onClick: handleNext,
+        disabled: isSubmitting,
+        children: [
+          confirmText,
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              style: {
+                opacity: 0.7,
+                fontSize: "0.75rem",
+                marginLeft: "0.5rem"
+              },
+              children: [
+                enterHint,
+                " \u21B5"
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "lf-navigation-button",
+        onClick: handleNext,
+        disabled: !canGoNext || isSubmitting,
+        "aria-label": "Next question",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6" })
+          }
+        )
+      }
+    )
+  ] });
+}
+function ProgressBar() {
+  const { content, answers, currentIndex, settings } = useFormContext();
+  const theme = chunkWIFNU3FA_cjs.useThemeContext();
+  const { percentage, segments } = chunkWIFNU3FA_cjs.useProgress({ content, answers, currentIndex });
+  if (!settings.showProgressBar || !theme.progressBar.enabled) {
+    return null;
+  }
+  const position = theme.progressBar.position === "bottom" ? "bottom" : "top";
+  const positionStyle = {
+    position: "fixed",
+    left: 0,
+    right: 0,
+    [position]: 0,
+    zIndex: 100
+  };
+  if (theme.progressBar.style === "segmented") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          ...positionStyle,
+          display: "flex",
+          gap: "4px",
+          padding: "8px 16px"
+        },
+        children: segments.map((segment) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              height: "4px",
+              backgroundColor: segment.completed ? "var(--lf-color-progress-fill)" : "var(--lf-color-progress-bg)",
+              transition: "background-color var(--lf-transition-duration) var(--lf-transition-easing)"
+            }
+          },
+          segment.index
+        ))
+      }
+    );
+  }
+  if (theme.progressBar.style === "percentage") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          ...positionStyle,
+          padding: "8px 16px",
+          textAlign: "center",
+          fontSize: "0.875rem",
+          fontWeight: 500,
+          color: "var(--lf-color-question)"
+        },
+        children: [
+          Math.round(percentage),
+          "%"
+        ]
+      }
+    );
+  }
+  if (theme.progressBar.style === "dots") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          ...positionStyle,
+          display: "flex",
+          justifyContent: "center",
+          gap: "8px",
+          padding: "8px 16px"
+        },
+        children: segments.map((segment) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: segment.current ? "12px" : "8px",
+              height: segment.current ? "12px" : "8px",
+              borderRadius: "50%",
+              backgroundColor: segment.completed || segment.current ? "var(--lf-color-progress-fill)" : "var(--lf-color-progress-bg)",
+              transition: "all var(--lf-transition-duration) var(--lf-transition-easing)"
+            }
+          },
+          segment.index
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...positionStyle, padding: "8px 16px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "lf-progress",
+      style: { height: "4px", borderRadius: "2px" },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "lf-progress-fill",
+          style: {
+            width: `${percentage}%`,
+            height: "100%",
+            borderRadius: "2px"
+          }
+        }
+      )
+    }
+  ) });
+}
+
+// src/utils/timeEstimate.ts
+var FIELD_TIME_ESTIMATES = {
+  // Text fields
+  short_text: 15,
+  long_text: 45,
+  email: 12,
+  phone_number: 15,
+  website: 12,
+  // Selection fields
+  multiple_choice: 10,
+  picture_choice: 12,
+  dropdown: 12,
+  yes_no: 5,
+  ranking: 20,
+  // Scale/rating fields
+  rating: 8,
+  opinion_scale: 8,
+  nps: 8,
+  // Complex fields
+  address: 60,
+  contact_info: 45,
+  date: 10,
+  number: 10,
+  slider: 8,
+  signature: 30,
+  file_upload: 20,
+  payment: 60,
+  // Display fields (minimal time)
+  statement: 5,
+  legal: 15,
+  group: 0,
+  matrix: 30
+};
+function formatTimeEstimate(seconds) {
+  if (seconds < 60) {
+    return `About ${Math.round(seconds / 10) * 10} sec`;
+  }
+  const minutes = Math.round(seconds / 60);
+  return `About ${minutes} min`;
+}
+function calculateRemainingTime(content, answeredFieldRefs) {
+  let totalSeconds = 0;
+  for (const field of content.fields) {
+    if (answeredFieldRefs.includes(field.ref)) {
+      continue;
+    }
+    const fieldTime = FIELD_TIME_ESTIMATES[field.type] ?? 15;
+    totalSeconds += fieldTime;
+  }
+  return totalSeconds;
+}
+function TimeToComplete() {
+  const { content, settings, answers, isStarted, isCompleted } = useFormContext();
+  if (!settings.showTimeToComplete) {
+    return null;
+  }
+  if (isCompleted) {
+    return null;
+  }
+  const answeredFieldRefs = Object.keys(answers);
+  const remainingSeconds = React2.useMemo(
+    () => calculateRemainingTime(content, answeredFieldRefs),
+    [content, answeredFieldRefs]
+  );
+  if (remainingSeconds <= 0) {
+    return null;
+  }
+  const timeText = formatTimeEstimate(remainingSeconds);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "lf-time-estimate",
+      style: {
+        position: "fixed",
+        top: "1rem",
+        right: "1rem",
+        zIndex: 50,
+        display: "flex",
+        alignItems: "center",
+        gap: "0.5rem",
+        padding: "0.5rem 0.75rem",
+        fontSize: "0.75rem",
+        color: "var(--lf-color-question)",
+        opacity: 0.7
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 6 12 12 16 14" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: timeText })
+      ]
+    }
+  );
+}
+function CookieConsent({ onAccept }) {
+  const [isVisible, setIsVisible] = React2.useState(false);
+  React2.useEffect(() => {
+    if (!chunkWIFNU3FA_cjs.hasCookieConsent()) {
+      setIsVisible(true);
+    }
+  }, []);
+  const handleAccept = () => {
+    chunkWIFNU3FA_cjs.setCookieConsent(true);
+    setIsVisible(false);
+    onAccept();
+  };
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "lf-cookie-consent",
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1e3,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "rgba(0, 0, 0, 0.5)"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            maxWidth: "400px",
+            margin: "1rem",
+            padding: "1.5rem",
+            backgroundColor: "var(--lf-color-surface, #fff)",
+            borderRadius: "var(--lf-border-radius, 8px)",
+            boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  width: "48px",
+                  height: "48px",
+                  margin: "0 auto 1rem",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  backgroundColor: "color-mix(in srgb, var(--lf-color-primary) 15%, transparent)",
+                  borderRadius: "50%"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  "svg",
+                  {
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "var(--lf-color-primary)",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "9", r: "1", fill: "currentColor" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15", cy: "9", r: "1", fill: "currentColor" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "14", r: "1", fill: "currentColor" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "14", cy: "14", r: "1", fill: "currentColor" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                className: "lf-question-title",
+                style: {
+                  fontSize: "1.25rem",
+                  textAlign: "center",
+                  marginBottom: "0.75rem"
+                },
+                children: "Cookie consent"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                className: "lf-question-description",
+                style: {
+                  textAlign: "center",
+                  marginBottom: "1.5rem",
+                  fontSize: "0.875rem",
+                  lineHeight: 1.5
+                },
+                children: "This form uses cookies to save your progress and provide a better experience. By continuing, you agree to the use of cookies."
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleAccept,
+                className: "lf-button",
+                style: {
+                  width: "100%",
+                  padding: "0.75rem 1.5rem",
+                  fontSize: "1rem"
+                },
+                children: "Accept and continue"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function Captcha({
+  siteKey,
+  onVerify,
+  onError,
+  onExpired,
+  theme = "auto",
+  size = "normal"
+}) {
+  const containerRef = React2.useRef(null);
+  const widgetIdRef = React2.useRef(null);
+  const [isLoading, setIsLoading] = React2.useState(true);
+  const [error, setError] = React2.useState(null);
+  const initializeTurnstile = React2.useCallback(() => {
+    if (!containerRef.current || !window.turnstile) return;
+    if (widgetIdRef.current) {
+      try {
+        window.turnstile.remove(widgetIdRef.current);
+      } catch (e) {
+      }
+    }
+    try {
+      widgetIdRef.current = window.turnstile.render(containerRef.current, {
+        sitekey: siteKey,
+        callback: (token) => {
+          setIsLoading(false);
+          onVerify(token);
+        },
+        "error-callback": () => {
+          setIsLoading(false);
+          setError("Verification failed. Please try again.");
+          onError?.();
+        },
+        "expired-callback": () => {
+          setError("Verification expired. Please try again.");
+          onExpired?.();
+        },
+        theme,
+        size
+      });
+      setIsLoading(false);
+    } catch (e) {
+      setIsLoading(false);
+      setError("Failed to initialize CAPTCHA.");
+      onError?.();
+    }
+  }, [siteKey, onVerify, onError, onExpired, theme, size]);
+  React2.useEffect(() => {
+    if (window.turnstile) {
+      initializeTurnstile();
+      return;
+    }
+    const existingScript = document.querySelector(
+      'script[src*="challenges.cloudflare.com/turnstile"]'
+    );
+    if (existingScript) {
+      existingScript.addEventListener("load", initializeTurnstile);
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js";
+    script.async = true;
+    script.defer = true;
+    script.onload = initializeTurnstile;
+    script.onerror = () => {
+      setIsLoading(false);
+      setError("Failed to load CAPTCHA. Please refresh the page.");
+      onError?.();
+    };
+    document.head.appendChild(script);
+    return () => {
+      if (widgetIdRef.current && window.turnstile) {
+        try {
+          window.turnstile.remove(widgetIdRef.current);
+        } catch (e) {
+        }
+      }
+    };
+  }, [initializeTurnstile, onError]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "lf-captcha",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "0.75rem",
+        padding: "1rem 0"
+      },
+      children: [
+        isLoading && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              color: "var(--lf-color-question)",
+              opacity: 0.7
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  className: "animate-spin",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "circle",
+                      {
+                        cx: "12",
+                        cy: "12",
+                        r: "10",
+                        stroke: "currentColor",
+                        strokeWidth: "4",
+                        fill: "none",
+                        opacity: "0.25"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 12a8 8 0 0 1 8-8", opacity: "0.75" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.875rem" }, children: "Loading verification..." })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef }),
+        error && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            style: {
+              color: "var(--lf-color-error, #ef4444)",
+              fontSize: "0.875rem",
+              textAlign: "center"
+            },
+            children: error
+          }
+        )
+      ]
+    }
+  );
+}
+function Branding() {
+  const theme = chunkWIFNU3FA_cjs.useThemeContext();
+  if (!theme.branding.showPoweredBy) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lf-branding", children: [
+    "Powered by",
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx("a", { href: "https://landform.io", target: "_blank", rel: "noopener noreferrer", children: "Landform" })
+  ] });
+}
+function Header() {
+  const theme = chunkWIFNU3FA_cjs.useThemeContext();
+  const headerLayout = theme.componentVariants?.headerLayout;
+  if (!headerLayout || headerLayout === "none") {
+    return null;
+  }
+  const brandName = theme.branding?.brandName;
+  const logoUrl = theme.branding?.logoUrl;
+  if (headerLayout === "centered-logo") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "lf-header-centered", children: [
+      logoUrl && /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: logoUrl,
+          alt: brandName || "Logo",
+          className: "lf-header-logo"
+        }
+      ),
+      brandName && !logoUrl && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lf-header-brand", style: { fontSize: "1.125rem", fontWeight: 600, color: "var(--lf-color-question)" }, children: brandName })
+    ] });
+  }
+  if (headerLayout === "left-logo") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "lf-header-left", style: {
+      display: "flex",
+      alignItems: "center",
+      padding: "1rem var(--lf-spacing-container)",
+      gap: "0.75rem"
+    }, children: [
+      logoUrl && /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: logoUrl,
+          alt: brandName || "Logo",
+          className: "lf-header-logo"
+        }
+      ),
+      brandName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "1rem", fontWeight: 500, color: "var(--lf-color-question)" }, children: brandName })
+    ] });
+  }
+  return null;
+}
+function FormRenderer(props) {
+  const { className, ...formOptions } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(FormProvider, { ...formOptions, children: /* @__PURE__ */ jsxRuntime.jsx(
+    FormRendererInner,
+    {
+      className,
+      theme: formOptions.theme,
+      turnstileSiteKey: formOptions.turnstileSiteKey
+    }
+  ) });
+}
+function FormRendererInner({ className, theme, turnstileSiteKey }) {
+  const {
+    currentItem,
+    settings,
+    isStarted,
+    isCompleted,
+    isDuplicateSubmission,
+    showCaptcha,
+    setCaptchaToken,
+    submit,
+    start,
+    next,
+    answers,
+    errors,
+    setAnswer
+  } = useFormContext();
+  const { backgroundStyle } = chunkWIFNU3FA_cjs.useTheme({ theme });
+  const [showCookieConsent, setShowCookieConsent] = React2.useState(false);
+  const [hasConsent, setHasConsent] = React2.useState(true);
+  React2.useEffect(() => {
+    if (settings.showCookieConsent && !chunkWIFNU3FA_cjs.hasCookieConsent()) {
+      setShowCookieConsent(true);
+      setHasConsent(false);
+    }
+  }, [settings.showCookieConsent]);
+  const handleCookieConsentAccept = () => {
+    setShowCookieConsent(false);
+    setHasConsent(true);
+  };
+  if (isDuplicateSubmission) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `lf-form ${className || ""}`, style: backgroundStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lf-question-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lf-screen", style: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: "80px",
+              height: "80px",
+              margin: "0 auto 1.5rem",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "var(--lf-color-primary)",
+              opacity: 0.1,
+              borderRadius: "50%"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "svg",
+              {
+                width: "40",
+                height: "40",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "var(--lf-color-primary)",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "22 4 12 14.01 9 11.01" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "lf-question-title", style: { marginBottom: "0.75rem" }, children: "You've already submitted" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lf-question-description", children: "You have already submitted a response to this form." })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Branding, {})
+    ] });
+  }
+  if (!currentItem) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `lf-form ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lf-screen", children: "Loading..." }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `lf-form ${className || ""}`, style: backgroundStyle, children: [
+    showCookieConsent && /* @__PURE__ */ jsxRuntime.jsx(CookieConsent, { onAccept: handleCookieConsentAccept }),
+    showCaptcha && turnstileSiteKey && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "lf-captcha-modal",
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 1e3,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "rgba(0, 0, 0, 0.5)"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              maxWidth: "400px",
+              margin: "1rem",
+              padding: "1.5rem",
+              backgroundColor: "var(--lf-color-surface, #fff)",
+              borderRadius: "var(--lf-border-radius, 8px)",
+              boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
+              textAlign: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: "lf-question-title",
+                  style: { fontSize: "1.25rem", marginBottom: "0.75rem" },
+                  children: "Please verify you're human"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: "lf-question-description",
+                  style: { marginBottom: "1rem", fontSize: "0.875rem", opacity: 0.7 },
+                  children: "Complete the verification below to submit your response."
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Captcha,
+                {
+                  siteKey: turnstileSiteKey,
+                  onVerify: (token) => {
+                    setCaptchaToken(token);
+                    submit();
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    isStarted && !isCompleted && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, {}),
+    isStarted && !isCompleted && /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(TimeToComplete, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "lf-question-container",
+        style: {
+          ...theme?.componentVariants?.containerMaxWidth && {
+            maxWidth: theme.componentVariants.containerMaxWidth
+          },
+          ...!hasConsent && { opacity: 0.3, pointerEvents: "none" }
+        },
+        children: [
+          currentItem.type === "welcome" && /* @__PURE__ */ jsxRuntime.jsx(WelcomeScreen, { screen: currentItem.screen, onStart: start }),
+          currentItem.type === "field" && /* @__PURE__ */ jsxRuntime.jsx(
+            FieldRenderer,
+            {
+              field: currentItem.field,
+              value: answers[currentItem.field.ref],
+              error: errors[currentItem.field.ref] || null,
+              onChange: (value) => setAnswer(currentItem.field.ref, value),
+              onNext: next,
+              questionNumber: currentItem.index + 1,
+              showQuestionNumber: settings.showQuestionNumber,
+              showKeyHints: settings.showKeyHintOnChoices,
+              systemMessages: settings.systemMessages
+            }
+          ),
+          currentItem.type === "thankYou" && /* @__PURE__ */ jsxRuntime.jsx(ThankYouScreen, { screen: currentItem.screen })
+        ]
+      }
+    ),
+    !settings.hideNavigation && isStarted && currentItem.type === "field" && /* @__PURE__ */ jsxRuntime.jsx(NavigationControls, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Branding, {})
+  ] });
+}
+function FormContainer({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `lf-form ${className || ""}`, children });
+}
+function QuestionContainer({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `lf-question-container ${className || ""}`, children });
+}
+function ClosedScreen({
+  title,
+  message,
+  type = "closed"
+}) {
+  const defaultTitle = type === "scheduled" ? "Form not available" : type === "limit" ? "Response limit reached" : "Form closed";
+  const defaultMessage = type === "scheduled" ? "This form is not currently accepting responses." : type === "limit" ? "This form has reached its maximum number of responses." : "This form is no longer accepting responses.";
+  const iconPath = type === "limit" ? (
+    // Bar chart icon for limit reached
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "20", x2: "18", y2: "10" }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "20", x2: "12", y2: "4" }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "20", x2: "6", y2: "14" })
+    ] })
+  ) : type === "scheduled" ? (
+    // Clock icon for scheduling
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 6 12 12 16 14" })
+    ] })
+  ) : (
+    // Lock icon for closed
+    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+    ] })
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lf-form", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lf-question-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lf-screen", style: { textAlign: "center" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          width: "80px",
+          height: "80px",
+          margin: "0 auto 1.5rem",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "color-mix(in srgb, var(--lf-color-primary, #6366f1) 15%, transparent)",
+          borderRadius: "50%"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            width: "40",
+            height: "40",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "var(--lf-color-primary, #6366f1)",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: iconPath
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "h1",
+      {
+        className: "lf-question-title",
+        style: {
+          fontSize: "2rem",
+          marginBottom: "0.75rem",
+          color: "var(--lf-color-question, #1f2937)"
+        },
+        children: title || defaultTitle
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: "lf-question-description",
+        style: {
+          fontSize: "1.125rem",
+          color: "var(--lf-color-question, #1f2937)",
+          opacity: 0.7
+        },
+        children: message || defaultMessage
+      }
+    )
+  ] }) }) });
+}
+
+exports.Branding = Branding;
+exports.ClosedScreen = ClosedScreen;
+exports.CookieConsent = CookieConsent;
+exports.FieldRenderer = FieldRenderer;
+exports.FormContainer = FormContainer;
+exports.FormProvider = FormProvider;
+exports.FormRenderer = FormRenderer;
+exports.MultipleChoice = MultipleChoice;
+exports.NavigationControls = NavigationControls;
+exports.NumberField = NumberField;
+exports.OpinionScale = OpinionScale;
+exports.ProgressBar = ProgressBar;
+exports.QuestionContainer = QuestionContainer;
+exports.QuestionHeader = QuestionHeader;
+exports.Rating = Rating;
+exports.Statement = Statement;
+exports.TextField = TextField;
+exports.ThankYouScreen = ThankYouScreen;
+exports.TimeToComplete = TimeToComplete;
+exports.WelcomeScreen = WelcomeScreen;
+exports.YesNo = YesNo;
+exports.useFormContext = useFormContext;
+//# sourceMappingURL=chunk-WHV333XL.cjs.map
+//# sourceMappingURL=chunk-WHV333XL.cjs.map