@opensite/ui 1.8.3 → 1.8.5

package/dist/contact-careers.cjs

@@ -3,14 +3,11 @@
 
 var React = require('react');
 var forms = require('@page-speed/forms');
-var upload = require('@page-speed/forms/upload');
-var inputs = require('@page-speed/forms/inputs');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var LabelPrimitive = require('@radix-ui/react-label');
-var SeparatorPrimitive = require('@radix-ui/react-separator');
+var inputs = require('@page-speed/forms/inputs');
 var integration = require('@page-speed/forms/integration');
 
 function _interopNamespace(e) {
@@ -32,12 +29,8 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
-var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 
 // components/blocks/contact/contact-careers.tsx
-var TextInput = inputs.TextInput;
-var TextArea = inputs.TextArea;
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -384,6 +377,7 @@ var Pressable = React__namespace.forwardRef(
       rel,
       linkType,
       isInternal,
+      isExternal,
       handleClick
     } = navigation;
     const shouldRenderLink = normalizedHref && linkType !== "none";
@@ -459,111 +453,6 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var svgCache = /* @__PURE__ */ new Map();
-function DynamicIcon({
-  name,
-  size = 28,
-  color,
-  className,
-  alt
-}) {
-  const [svgContent, setSvgContent] = React__namespace.useState(null);
-  const [isLoading, setIsLoading] = React__namespace.useState(true);
-  const [error, setError] = React__namespace.useState(null);
-  const { url, iconName } = React__namespace.useMemo(() => {
-    const separator = name.includes("/") ? "/" : ":";
-    const [prefix, iconName2] = name.split(separator);
-    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}&key=au382bi7fsh96w9h9xlrnat2jglx`;
-    return {
-      url: baseUrl,
-      iconName: iconName2
-    };
-  }, [name, size]);
-  React__namespace.useEffect(() => {
-    let isMounted = true;
-    const fetchSvg = async () => {
-      const cached = svgCache.get(url);
-      if (cached) {
-        if (isMounted) {
-          setSvgContent(cached);
-          setIsLoading(false);
-        }
-        return;
-      }
-      try {
-        setIsLoading(true);
-        setError(null);
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch icon: ${response.status}`);
-        }
-        let svg = await response.text();
-        svg = processSvgForCurrentColor(svg);
-        svgCache.set(url, svg);
-        if (isMounted) {
-          setSvgContent(svg);
-          setIsLoading(false);
-        }
-      } catch (err) {
-        if (isMounted) {
-          setError(err instanceof Error ? err.message : "Failed to load icon");
-          setIsLoading(false);
-        }
-      }
-    };
-    fetchSvg();
-    return () => {
-      isMounted = false;
-    };
-  }, [url]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        "aria-hidden": "true"
-      }
-    );
-  }
-  if (error || !svgContent) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        role: "img",
-        "aria-label": alt || iconName
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: cn("inline-flex items-center justify-center", className),
-      style: {
-        width: size,
-        height: size,
-        color: color || "inherit"
-      },
-      role: "img",
-      "aria-label": alt || iconName,
-      dangerouslySetInnerHTML: { __html: svgContent }
-    }
-  );
-}
-function processSvgForCurrentColor(svg) {
-  let processed = svg;
-  processed = processed.replace(
-    /stroke=["'](#000000|#000|black)["']/gi,
-    'stroke="currentColor"'
-  );
-  processed = processed.replace(
-    /fill=["'](#000000|#000|black)["']/gi,
-    'fill="currentColor"'
-  );
-  return processed;
-}
 function Card({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -587,58 +476,450 @@ function CardContent({ className, ...props }) {
     }
   );
 }
-function Label({
+function DynamicFormField({
+  field,
   className,
-  ...props
+  uploadProgress = {},
+  onFileUpload,
+  onFileRemove,
+  isUploading = false
 }) {
+  const fieldId = field.name;
+  const usesGroupLegend = field.type === "radio" || field.type === "checkbox-group";
+  const usesInlineCheckboxLabel = field.type === "checkbox";
+  const shouldRenderFieldLabel = !usesGroupLegend && !usesInlineCheckboxLabel;
+  const checkboxLabel = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    field.label,
+    field.required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive ml-1", children: "*" }) : null
+  ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
-    LabelPrimitive__namespace.Root,
+    forms.Field,
     {
-      "data-slot": "label",
-      className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      ),
-      ...props
+      name: field.name,
+      label: shouldRenderFieldLabel ? field.label : void 0,
+      description: shouldRenderFieldLabel ? field.description : void 0,
+      required: field.required,
+      className: cn("space-y-2", className),
+      children: ({ field: formField, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        (field.type === "text" || field.type === "email" || field.type === "tel" || field.type === "search" || field.type === "password" || field.type === "url") && /* @__PURE__ */ jsxRuntime.jsx(
+          inputs.TextInput,
+          {
+            ...formField,
+            id: fieldId,
+            type: field.type,
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "number" && /* @__PURE__ */ jsxRuntime.jsx(
+          inputs.TextInput,
+          {
+            ...formField,
+            id: fieldId,
+            type: "text",
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "textarea" && /* @__PURE__ */ jsxRuntime.jsx(
+          inputs.TextArea,
+          {
+            ...formField,
+            id: fieldId,
+            placeholder: field.placeholder,
+            rows: field.rows || 4,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "select" && field.options && /* @__PURE__ */ jsxRuntime.jsx(
+          inputs.Select,
+          {
+            ...formField,
+            id: fieldId,
+            options: field.options,
+            placeholder: field.placeholder || `Select ${field.label.toLowerCase()}`,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "multi-select" && field.options && /* @__PURE__ */ jsxRuntime.jsx(
+          inputs.MultiSelect,
+          {
+            ...formField,
+            id: fieldId,
+            options: field.options,
+            placeholder: field.placeholder || `Select ${field.label.toLowerCase()}`,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "radio" && field.options && /* @__PURE__ */ jsxRuntime.jsx(
+          inputs.Radio,
+          {
+            ...formField,
+            id: fieldId,
+            options: field.options,
+            label: field.label,
+            description: field.description,
+            required: field.required,
+            disabled: field.disabled,
+            layout: field.layout || "stacked",
+            error: meta.touched && !!meta.error,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "checkbox" && /* @__PURE__ */ jsxRuntime.jsx(
+          inputs.Checkbox,
+          {
+            ...formField,
+            id: fieldId,
+            value: formField.value === true || formField.value === "true",
+            onChange: (checked) => formField.onChange(checked),
+            label: checkboxLabel,
+            description: field.description,
+            disabled: field.disabled,
+            required: field.required,
+            error: meta.touched && !!meta.error,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "checkbox-group" && field.options && /* @__PURE__ */ jsxRuntime.jsx(
+          inputs.CheckboxGroup,
+          {
+            ...formField,
+            id: fieldId,
+            options: field.options,
+            label: field.label,
+            description: field.description,
+            required: field.required,
+            disabled: field.disabled,
+            layout: field.layout || "stacked",
+            error: meta.touched && !!meta.error,
+            "aria-label": field.label
+          }
+        ),
+        (field.type === "date-picker" || field.type === "date") && /* @__PURE__ */ jsxRuntime.jsx(
+          inputs.DatePicker,
+          {
+            ...formField,
+            id: fieldId,
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "date-range" && /* @__PURE__ */ jsxRuntime.jsx(
+          inputs.DateRangePicker,
+          {
+            ...formField,
+            id: fieldId,
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "time" && /* @__PURE__ */ jsxRuntime.jsx(
+          inputs.TimePicker,
+          {
+            ...formField,
+            id: fieldId,
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "file" && /* @__PURE__ */ jsxRuntime.jsx(
+          inputs.FileInput,
+          {
+            ...formField,
+            id: fieldId,
+            accept: field.accept,
+            maxSize: field.maxSize || 5 * 1024 * 1024,
+            maxFiles: field.maxFiles || 1,
+            multiple: field.multiple || false,
+            placeholder: field.placeholder || "Choose file(s)...",
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled || isUploading,
+            showProgress: true,
+            uploadProgress,
+            onChange: (files) => {
+              formField.onChange(files);
+              if (files.length > 0 && onFileUpload) {
+                onFileUpload(files);
+              }
+            },
+            onFileRemove,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "rich-text" && /* @__PURE__ */ jsxRuntime.jsx(
+          inputs.RichTextEditor,
+          {
+            ...formField,
+            id: fieldId,
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        )
+      ] })
     }
   );
 }
-function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      type,
-      "data-slot": "input",
-      className: cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className
-      ),
-      ...props
-    }
+
+// lib/form-field-types.ts
+function generateInitialValues(fields) {
+  return fields.reduce(
+    (acc, field) => {
+      if (field.type === "checkbox") {
+        acc[field.name] = false;
+      } else if (field.type === "checkbox-group" || field.type === "multi-select") {
+        acc[field.name] = [];
+      } else if (field.type === "file") {
+        acc[field.name] = [];
+      } else if (field.type === "date-range") {
+        acc[field.name] = { start: null, end: null };
+      } else {
+        acc[field.name] = "";
+      }
+      return acc;
+    },
+    {}
   );
 }
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SeparatorPrimitive__namespace.Root,
-    {
-      "data-slot": "separator",
-      decorative,
-      orientation,
-      className: cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-        className
-      ),
-      ...props
-    }
+function generateValidationSchema(fields) {
+  return fields.reduce(
+    (acc, field) => {
+      acc[field.name] = (value, allValues) => {
+        if (field.required) {
+          if (!value || typeof value === "string" && !value.trim()) {
+            return `${field.label} is required`;
+          }
+        }
+        if (field.type === "email" && value) {
+          if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+            return "Please enter a valid email address";
+          }
+        }
+        if (field.type === "url" && value) {
+          try {
+            new URL(value);
+          } catch {
+            return "Please enter a valid URL";
+          }
+        }
+        if (field.validator) {
+          return field.validator(value, allValues);
+        }
+        return void 0;
+      };
+      return acc;
+    },
+    {}
   );
 }
+var columnSpanClasses = {
+  1: "col-span-12 md:col-span-1",
+  2: "col-span-12 md:col-span-2",
+  3: "col-span-12 md:col-span-3",
+  4: "col-span-12 md:col-span-4",
+  5: "col-span-12 md:col-span-5",
+  6: "col-span-12 md:col-span-6",
+  7: "col-span-12 md:col-span-7",
+  8: "col-span-12 md:col-span-8",
+  9: "col-span-12 md:col-span-9",
+  10: "col-span-12 md:col-span-10",
+  11: "col-span-12 md:col-span-11",
+  12: "col-span-12"
+};
+function getColumnSpanClass(span) {
+  if (!span || span === 12) return "col-span-12";
+  const clamped = Math.max(1, Math.min(span, 12));
+  return columnSpanClasses[clamped] || "col-span-12";
+}
+function useFileUpload(options) {
+  const [uploadTokens, setUploadTokens] = React.useState([]);
+  const [uploadProgress, setUploadProgress] = React.useState({});
+  const [isUploading, setIsUploading] = React.useState(false);
+  const endpoint = options?.endpoint || "https://api.dashtrack.com/contacts/_/contact_form_uploads";
+  const uploadFiles = React.useCallback(
+    async (files) => {
+      if (files.length === 0) return;
+      setIsUploading(true);
+      try {
+        const tokens = [];
+        for (const file of files) {
+          const formData = new FormData();
+          formData.append("contact_form_upload[file_upload]", file);
+          formData.append("contact_form_upload[title]", file.name);
+          formData.append("contact_form_upload[file_name]", file.name);
+          formData.append("contact_form_upload[file_size]", String(file.size));
+          const response = await fetch(endpoint, {
+            method: "POST",
+            body: formData
+          });
+          if (!response.ok) {
+            throw new Error(`Upload failed: ${response.statusText}`);
+          }
+          const data = await response.json();
+          if (data.contact_form_upload?.token) {
+            tokens.push(`upload_${data.contact_form_upload.token}`);
+          }
+          setUploadProgress((prev) => ({
+            ...prev,
+            [file.name]: 100
+          }));
+        }
+        setUploadTokens(tokens);
+      } catch (error) {
+        console.error("File upload error:", error);
+        options?.onError?.(error);
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [endpoint, options]
+  );
+  const removeFile = React.useCallback((file, index) => {
+    setUploadTokens((prev) => prev.filter((_, i) => i !== index));
+    setUploadProgress((prev) => {
+      const newProgress = { ...prev };
+      delete newProgress[file.name];
+      return newProgress;
+    });
+  }, []);
+  const resetUpload = React.useCallback(() => {
+    setUploadTokens([]);
+    setUploadProgress({});
+  }, []);
+  return {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  };
+}
+function useContactForm(options) {
+  const {
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess,
+    onError,
+    resetOnSuccess = true,
+    uploadTokens = []
+  } = options;
+  const [submissionError, setSubmissionError] = React.useState(null);
+  const submissionConfig = formConfig?.submissionConfig;
+  const redirectUrl = submissionConfig?.redirectUrl;
+  const redirectNavigation = useNavigation({ href: redirectUrl });
+  const resetSubmissionState = React.useCallback(() => {
+    setSubmissionError(null);
+  }, []);
+  const performRedirect = React.useCallback(() => {
+    if (!redirectUrl || typeof window === "undefined") {
+      return;
+    }
+    const navigate = () => {
+      if (redirectNavigation.shouldUseRouter && redirectNavigation.normalizedHref) {
+        const handler = window.__opensiteNavigationHandler;
+        if (typeof handler === "function") {
+          try {
+            const handled = handler(redirectNavigation.normalizedHref, void 0);
+            if (handled !== false) {
+              return;
+            }
+          } catch (error) {
+            console.error("Internal redirect handler failed:", error);
+          }
+        }
+      }
+      const destination = redirectNavigation.normalizedHref || redirectUrl;
+      window.location.assign(destination);
+    };
+    window.setTimeout(navigate, 150);
+  }, [redirectNavigation, redirectUrl]);
+  const form = forms.useForm({
+    initialValues: React.useMemo(
+      () => generateInitialValues(formFields),
+      [formFields]
+    ),
+    validationSchema: React.useMemo(
+      () => generateValidationSchema(formFields),
+      [formFields]
+    ),
+    onSubmit: async (values, helpers) => {
+      resetSubmissionState();
+      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
+      if (!shouldAutoSubmit && !onSubmit) {
+        return;
+      }
+      try {
+        let result;
+        const submissionValues = {
+          ...values,
+          ...uploadTokens.length > 0 && {
+            contact_form_upload_tokens: uploadTokens
+          }
+        };
+        if (shouldAutoSubmit) {
+          result = await submitPageSpeedForm(submissionValues, formConfig);
+        }
+        if (onSubmit) {
+          await onSubmit(submissionValues);
+        }
+        if (shouldAutoSubmit || onSubmit) {
+          try {
+            await submissionConfig?.handleFormSubmission?.({
+              formData: submissionValues,
+              responseData: result
+            });
+          } catch (callbackError) {
+            console.error("handleFormSubmission callback failed:", callbackError);
+          }
+          if (resetOnSuccess) {
+            helpers.resetForm();
+          }
+          onSuccess?.(result);
+          if (submissionConfig?.behavior === "redirect" && submissionConfig.redirectUrl) {
+            performRedirect();
+          }
+        }
+      } catch (error) {
+        if (error instanceof PageSpeedFormSubmissionError && error.formErrors) {
+          helpers.setErrors(error.formErrors);
+        }
+        const errorMessage = error instanceof Error ? error.message : "Form submission failed";
+        setSubmissionError(errorMessage);
+        onError?.(error);
+      }
+    }
+  });
+  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
+  return {
+    form,
+    isSubmitted: form.status === "success",
+    submissionError,
+    formMethod,
+    resetSubmissionState
+  };
+}
+
+// lib/forms.ts
 var PageSpeedFormSubmissionError = class extends Error {
   constructor(message, options = {}) {
     super(message);
@@ -1129,141 +1410,169 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var POSITIONS = [
-  { value: "frontend", label: "Frontend Developer" },
-  { value: "backend", label: "Backend Developer" },
-  { value: "fullstack", label: "Full Stack Developer" },
-  { value: "designer", label: "Product Designer" },
-  { value: "pm", label: "Product Manager" },
-  { value: "marketing", label: "Marketing Manager" },
-  { value: "other", label: "Other" }
-];
-var AVAILABILITY = [
-  { value: "immediately", label: "Immediately" },
-  { value: "2-weeks", label: "2 weeks notice" },
-  { value: "1-month", label: "1 month notice" },
-  { value: "flexible", label: "Flexible" }
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "position",
+    type: "select",
+    label: "Position Applying For",
+    placeholder: "Select a position",
+    required: true,
+    columnSpan: 12,
+    options: [
+      { value: "frontend", label: "Frontend Developer" },
+      { value: "backend", label: "Backend Developer" },
+      { value: "fullstack", label: "Full Stack Developer" },
+      { value: "designer", label: "Product Designer" },
+      { value: "pm", label: "Product Manager" },
+      { value: "marketing", label: "Marketing Manager" },
+      { value: "other", label: "Other" }
+    ]
+  },
+  {
+    name: "firstName",
+    type: "text",
+    label: "First Name",
+    placeholder: "John",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "lastName",
+    type: "text",
+    label: "Last Name",
+    placeholder: "Doe",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "john@example.com",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "phone",
+    type: "tel",
+    label: "Phone Number",
+    placeholder: "+1 (555) 000-0000",
+    required: true,
+    columnSpan: 6
+  },
+  {
+    name: "linkedin",
+    type: "url",
+    label: "LinkedIn Profile",
+    placeholder: "https://linkedin.com/in/yourprofile",
+    required: false,
+    columnSpan: 6
+  },
+  {
+    name: "portfolio",
+    type: "url",
+    label: "Portfolio/Website",
+    placeholder: "https://yourportfolio.com",
+    required: false,
+    columnSpan: 6
+  },
+  {
+    name: "availability",
+    type: "select",
+    label: "Availability",
+    placeholder: "Select your availability",
+    required: true,
+    columnSpan: 12,
+    options: [
+      { value: "immediately", label: "Immediately" },
+      { value: "2-weeks", label: "2 weeks notice" },
+      { value: "1-month", label: "1 month notice" },
+      { value: "flexible", label: "Flexible" }
+    ]
+  },
+  {
+    name: "coverLetter",
+    type: "textarea",
+    label: "Cover Letter",
+    placeholder: "Tell us why you'd be a great fit for this position...",
+    required: true,
+    rows: 6,
+    columnSpan: 12
+  },
+  {
+    name: "resume",
+    type: "file",
+    label: "Resume/CV",
+    placeholder: "Upload your resume (PDF, DOC, DOCX)",
+    required: true,
+    columnSpan: 12,
+    accept: ".pdf,.doc,.docx"
+  }
 ];
 function ContactCareers({
   heading,
   description,
-  buttonText,
+  buttonText = "Submit Application",
   buttonIcon,
   actions,
   actionsSlot,
+  formFields,
+  successMessage = "Thank you for your application! We'll review it and get back to you soon.",
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   headerClassName,
   headingClassName,
   descriptionClassName,
   cardClassName,
   cardContentClassName,
   submitClassName,
-  background = "white",
-  spacing = "xl",
+  formClassName,
+  successMessageClassName,
+  errorMessageClassName,
+  background,
+  spacing = "py-8 md:py-32",
   pattern,
-  patternOpacity = 0.1,
+  patternOpacity,
   formConfig,
   onSubmit,
   onSuccess,
   onError
 }) {
-  const [resume, setResume] = React.useState(null);
-  const formatFileSize = (bytes) => {
-    if (bytes === 0) return "0 Bytes";
-    const k = 1024;
-    const sizes = ["Bytes", "KB", "MB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
-  };
-  const form = forms.useForm({
-    initialValues: {
-      position: "",
-      linkedin: "",
-      portfolio: "",
-      availability: "2-weeks",
-      firstName: "",
-      lastName: "",
-      email: "",
-      phone: "",
-      coverLetter: "",
-      contact_form_upload_tokens: []
-    },
-    validationSchema: {
-      position: (value) => !value ? "Position is required" : void 0,
-      firstName: (value) => !value ? "First name is required" : void 0,
-      lastName: (value) => !value ? "Last name is required" : void 0,
-      email: (value) => {
-        if (!value) return "Email is required";
-        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
-          return "Please enter a valid email address";
-        return void 0;
-      },
-      phone: (value) => !value ? "Phone number is required" : void 0
+  const fields = React.useMemo(
+    () => formFields || DEFAULT_FORM_FIELDS,
+    [formFields]
+  );
+  const {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  } = useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
+    formFields: fields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
     },
-    onSubmit: async (values, helpers) => {
-      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
-      if (!shouldAutoSubmit && !onSubmit) {
-        return;
-      }
-      try {
-        let result;
-        if (shouldAutoSubmit) {
-          result = await submitPageSpeedForm(values, formConfig);
-        }
-        if (onSubmit) {
-          await onSubmit(values);
-        }
-        if (shouldAutoSubmit || onSubmit) {
-          if (formConfig?.resetOnSuccess !== false) {
-            helpers.resetForm();
-            setResume(null);
-          }
-          onSuccess?.(result);
-        }
-      } catch (error) {
-        if (error instanceof PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
-        }
-        onError?.(error);
-        throw error;
-      }
-    }
+    onError,
+    uploadTokens
   });
-  const { upload: upload$1, state: uploadState } = upload.useFileUpload({
-    endpoint: formConfig?.endpoint ? `${new URL(formConfig.endpoint, typeof window !== "undefined" ? window.location.origin : "http://localhost").origin}/contacts/_/contact_form_uploads` : "https://api.toastability.com/contacts/_/contact_form_uploads",
-    format: "legacy",
-    onComplete: (token) => {
-      const tokens = Array.isArray(token) ? token : [token];
-      form.setFieldValue(
-        "contact_form_upload_tokens",
-        tokens.map((value) => `upload_${value}`)
-      );
-    }
-  });
-  const handleFileChange = async (e) => {
-    if (e.target.files && e.target.files[0]) {
-      const file = e.target.files[0];
-      setResume(file);
-      try {
-        await upload$1(file);
-      } catch (error) {
-        console.error("File upload failed:", error);
-        setResume(null);
-        onError?.(error);
-      }
-    }
-  };
-  const handleRemoveFile = () => {
-    setResume(null);
-    form.setFieldValue("contact_form_upload_tokens", []);
-  };
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
-  const actionsContent = React__namespace.useMemo(() => {
+  const actionsContent = React.useMemo(() => {
     if (actionsSlot) return actionsSlot;
     if (actions && actions.length > 0) {
       return actions.map((action, index) => {
-        const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+        const {
+          label,
+          icon,
+          iconAfter,
+          children,
+          className: actionClassName,
+          ...pressableProps
+        } = action;
         return /* @__PURE__ */ jsxRuntime.jsx(
           Pressable,
           {
@@ -1289,261 +1598,71 @@ function ContactCareers({
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto w-full max-w-4xl px-4", containerClassName), children: [
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-3 text-3xl font-bold tracking-tight", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed text-muted-foreground", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "mb-3 text-3xl font-bold tracking-tight",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-relaxed", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-0", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cardClassName, children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-0", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
           forms.Form,
           {
             form,
             action: formConfig?.endpoint,
             method: formMethod,
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid md:grid-cols-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b p-6 md:border-b-0 md:border-r", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    DynamicIcon,
+            submissionError,
+            successMessage,
+            successMessageClassName,
+            errorMessageClassName,
+            submissionConfig: formConfig?.submissionConfig,
+            onNewSubmission: () => {
+              resetUpload();
+              resetSubmissionState();
+            },
+            className: cn("p-6 space-y-6", formClassName),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-6", children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: getColumnSpanClass(field.columnSpan),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    DynamicFormField,
                     {
-                      name: "lucide/briefcase",
-                      size: 20,
-                      className: "text-muted-foreground"
+                      field,
+                      uploadProgress,
+                      onFileUpload: uploadFiles,
+                      onFileRemove: removeFile,
+                      isUploading
                     }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: "Position Details" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "position", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "position", children: "Position" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      inputs.Select,
-                      {
-                        ...field,
-                        id: "position",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Position",
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select a position" }),
-                          POSITIONS.map((pos) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: pos.value, children: pos.label }, pos.value))
-                        ]
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Resume / CV" }),
-                    !resume ? /* @__PURE__ */ jsxRuntime.jsxs(
-                      "label",
-                      {
-                        htmlFor: "resume-upload",
-                        className: cn(
-                          "flex cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed p-6 transition-colors hover:border-foreground",
-                          uploadState === "uploading" && "opacity-50 cursor-not-allowed"
-                        ),
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            DynamicIcon,
-                            {
-                              name: uploadState === "uploading" ? "lucide/loader-2" : "lucide/upload",
-                              size: 24,
-                              className: cn(
-                                "mb-2 text-muted-foreground",
-                                uploadState === "uploading" && "animate-spin"
-                              )
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: uploadState === "uploading" ? "Uploading..." : "Upload your resume" }),
-                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "PDF or DOCX up to 5MB" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            Input,
-                            {
-                              id: "resume-upload",
-                              type: "file",
-                              className: "hidden",
-                              accept: ".pdf,.doc,.docx",
-                              onChange: handleFileChange,
-                              disabled: uploadState === "uploading"
-                            }
-                          )
-                        ]
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between rounded-lg border p-3", children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          DynamicIcon,
-                          {
-                            name: uploadState === "completed" ? "lucide/check-circle" : "lucide/file",
-                            size: 20,
-                            className: cn(
-                              "text-muted-foreground",
-                              uploadState === "completed" && "text-success"
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: resume.name }),
-                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: uploadState === "completed" ? "Uploaded successfully" : formatFileSize(resume.size) })
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        Pressable,
-                        {
-                          componentType: "button",
-                          type: "button",
-                          variant: "ghost",
-                          size: "icon",
-                          onClick: handleRemoveFile,
-                          asButton: true,
-                          children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 16 })
-                        }
-                      )
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "linkedin", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "linkedin", children: "LinkedIn Profile (Optional)" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      TextInput,
-                      {
-                        ...field,
-                        id: "linkedin",
-                        type: "url",
-                        placeholder: "https://linkedin.com/in/yourprofile",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "LinkedIn Profile"
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "portfolio", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "portfolio", children: "Portfolio / Website (Optional)" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      TextInput,
-                      {
-                        ...field,
-                        id: "portfolio",
-                        type: "url",
-                        placeholder: "https://yourportfolio.com",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Portfolio / Website"
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "availability", children: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
-                    inputs.Radio,
-                    {
-                      name: "availability",
-                      label: "Availability",
-                      value: field.value,
-                      onChange: field.onChange,
-                      options: AVAILABILITY,
-                      layout: "stacked",
-                      className: "space-y-2"
-                    }
-                  ) })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/user",
-                      size: 20,
-                      className: "text-muted-foreground"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold", children: "Your Information" })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "firstName", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "first-name", children: "First Name" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        TextInput,
-                        {
-                          ...field,
-                          id: "first-name",
-                          placeholder: "John",
-                          error: meta.touched && !!meta.error,
-                          "aria-label": "First Name"
-                        }
-                      )
-                    ] }) }),
-                    /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "lastName", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "last-name", children: "Last Name" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        TextInput,
-                        {
-                          ...field,
-                          id: "last-name",
-                          placeholder: "Doe",
-                          error: meta.touched && !!meta.error,
-                          "aria-label": "Last Name"
-                        }
-                      )
-                    ] }) })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "email", children: "Email" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      TextInput,
-                      {
-                        ...field,
-                        id: "email",
-                        type: "email",
-                        placeholder: "john@example.com",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Email"
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "phone", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "phone", children: "Phone" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      TextInput,
-                      {
-                        ...field,
-                        id: "phone",
-                        type: "tel",
-                        placeholder: "+1 (555) 000-0000",
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Phone"
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "coverLetter", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "cover-letter", children: "Cover Letter (Optional)" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      TextArea,
-                      {
-                        ...field,
-                        id: "cover-letter",
-                        placeholder: "Tell us why you'd be a great fit for this role...",
-                        rows: 5,
-                        error: meta.touched && !!meta.error,
-                        "aria-label": "Cover Letter"
-                      }
-                    )
-                  ] }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Separator, { className: "my-4" }),
-                  actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
-                    Pressable,
-                    {
-                      componentType: "button",
-                      type: "submit",
-                      className: cn("w-full", submitClassName),
-                      asButton: true,
-                      disabled: form.isSubmitting,
-                      children: [
-                        buttonIcon,
-                        buttonText
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-xs text-muted-foreground", children: "We'll review your application and get back to you within 5 business days." })
-                ] })
-              ] })
-            ] })
+                  )
+                },
+                field.name
+              )) }),
+              actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
+                Pressable,
+                {
+                  componentType: "button",
+                  type: "submit",
+                  className: cn("w-full", submitClassName),
+                  asButton: true,
+                  disabled: form.isSubmitting,
+                  children: [
+                    buttonIcon,
+                    buttonText
+                  ]
+                }
+              )
+            ]
           }
         ) }) })
       ] })