@opensite/ui 1.8.1 → 1.8.3

package/dist/contact-faq.js

@@ -6,8 +6,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { TextInput, TextArea, Select, Radio, Checkbox, CheckboxGroup, DatePicker, DateRangePicker, TimePicker, FileInput, RichTextEditor } from '@page-speed/forms/inputs';
-import * as LabelPrimitive from '@radix-ui/react-label';
+import { TextInput, TextArea, Select, MultiSelect, Radio, Checkbox, CheckboxGroup, DatePicker, DateRangePicker, TimePicker, FileInput, RichTextEditor } from '@page-speed/forms/inputs';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { serializeForRails, deserializeErrors } from '@page-speed/forms/integration';
 
@@ -358,6 +357,7 @@ var Pressable = React.forwardRef(
       rel,
       linkType,
       isInternal,
+      isExternal,
       handleClick
     } = navigation;
     const shouldRenderLink = normalizedHref && linkType !== "none";
@@ -456,22 +456,6 @@ function CardContent({ className, ...props }) {
     }
   );
 }
-function Label({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    LabelPrimitive.Root,
-    {
-      "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
-    }
-  );
-}
 function DynamicFormField({
   field,
   className,
@@ -480,190 +464,199 @@ function DynamicFormField({
   onFileRemove,
   isUploading = false
 }) {
-  const fieldId = `field-${field.name}`;
-  return /* @__PURE__ */ jsx(Field, { name: field.name, children: ({ field: formField, meta }) => /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
-    field.type !== "checkbox" && /* @__PURE__ */ jsxs(Label, { htmlFor: fieldId, children: [
-      field.label,
-      field.required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
-    ] }),
-    (field.type === "text" || field.type === "email" || field.type === "tel" || field.type === "search" || field.type === "password" || field.type === "url") && /* @__PURE__ */ jsx(
-      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__ */ jsx(
-      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__ */ jsx(
-      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__ */ jsx(
-      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__ */ jsx(
-      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,
-        multiple: true
-      }
-    ),
-    field.type === "radio" && field.options && /* @__PURE__ */ jsx(
-      Radio,
-      {
-        ...formField,
-        id: fieldId,
-        options: field.options,
-        disabled: field.disabled,
-        layout: field.layout || "stacked",
-        error: meta.touched && !!meta.error,
-        "aria-label": field.label
-      }
-    ),
-    field.type === "checkbox" && /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-2", children: [
-      /* @__PURE__ */ jsx(
-        Checkbox,
-        {
-          ...formField,
-          id: fieldId,
-          value: formField.value === true || formField.value === "true",
-          onChange: (checked) => formField.onChange(checked),
-          disabled: field.disabled,
-          error: meta.touched && !!meta.error,
-          "aria-label": field.label
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        Label,
-        {
-          htmlFor: fieldId,
-          className: "font-normal cursor-pointer leading-relaxed",
-          children: [
-            field.label,
-            field.required && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
-          ]
-        }
-      )
-    ] }),
-    field.type === "checkbox-group" && field.options && /* @__PURE__ */ jsx(
-      CheckboxGroup,
-      {
-        ...formField,
-        id: fieldId,
-        options: field.options,
-        disabled: field.disabled,
-        layout: field.layout || "stacked",
-        error: meta.touched && !!meta.error,
-        "aria-label": field.label
-      }
-    ),
-    (field.type === "date-picker" || field.type === "date") && /* @__PURE__ */ jsx(
-      DatePicker,
-      {
-        ...formField,
-        id: fieldId,
-        placeholder: field.placeholder,
-        error: meta.touched && !!meta.error,
-        disabled: field.disabled,
-        "aria-label": field.label
-      }
-    ),
-    field.type === "date-range" && /* @__PURE__ */ jsx(
-      DateRangePicker,
-      {
-        ...formField,
-        id: fieldId,
-        error: meta.touched && !!meta.error,
-        disabled: field.disabled,
-        "aria-label": field.label
-      }
-    ),
-    field.type === "time" && /* @__PURE__ */ jsx(
-      TimePicker,
-      {
-        ...formField,
-        id: fieldId,
-        placeholder: field.placeholder,
-        error: meta.touched && !!meta.error,
-        disabled: field.disabled,
-        "aria-label": field.label
-      }
-    ),
-    field.type === "file" && /* @__PURE__ */ jsx(
-      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);
+  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__ */ jsxs(Fragment, { children: [
+    field.label,
+    field.required ? /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" }) : null
+  ] });
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      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__ */ jsxs("div", { children: [
+        (field.type === "text" || field.type === "email" || field.type === "tel" || field.type === "search" || field.type === "password" || field.type === "url") && /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            ...formField,
+            id: fieldId,
+            type: field.type,
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
           }
-        },
-        onFileRemove,
-        "aria-label": field.label
-      }
-    ),
-    field.type === "rich-text" && /* @__PURE__ */ jsx(
-      RichTextEditor,
-      {
-        ...formField,
-        id: fieldId,
-        placeholder: field.placeholder,
-        error: meta.touched && !!meta.error,
-        disabled: field.disabled,
-        "aria-label": field.label
-      }
-    )
-  ] }) });
+        ),
+        field.type === "number" && /* @__PURE__ */ jsx(
+          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__ */ jsx(
+          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__ */ jsx(
+          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__ */ jsx(
+          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__ */ jsx(
+          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__ */ jsx(
+          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__ */ jsx(
+          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__ */ jsx(
+          DatePicker,
+          {
+            ...formField,
+            id: fieldId,
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "date-range" && /* @__PURE__ */ jsx(
+          DateRangePicker,
+          {
+            ...formField,
+            id: fieldId,
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "time" && /* @__PURE__ */ jsx(
+          TimePicker,
+          {
+            ...formField,
+            id: fieldId,
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        ),
+        field.type === "file" && /* @__PURE__ */ jsx(
+          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__ */ jsx(
+          RichTextEditor,
+          {
+            ...formField,
+            id: fieldId,
+            placeholder: field.placeholder,
+            error: meta.touched && !!meta.error,
+            disabled: field.disabled,
+            "aria-label": field.label
+          }
+        )
+      ] })
+    }
+  );
 }
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
@@ -962,8 +955,36 @@ function useContactForm(options) {
     resetOnSuccess = true,
     uploadTokens = []
   } = options;
-  const [isSubmitted, setIsSubmitted] = useState(false);
   const [submissionError, setSubmissionError] = useState(null);
+  const submissionConfig = formConfig?.submissionConfig;
+  const redirectUrl = submissionConfig?.redirectUrl;
+  const redirectNavigation = useNavigation({ href: redirectUrl });
+  const resetSubmissionState = useCallback(() => {
+    setSubmissionError(null);
+  }, []);
+  const performRedirect = 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 = useForm({
     initialValues: useMemo(
       () => generateInitialValues(formFields),
@@ -974,7 +995,7 @@ function useContactForm(options) {
       [formFields]
     ),
     onSubmit: async (values, helpers) => {
-      setSubmissionError(null);
+      resetSubmissionState();
       const shouldAutoSubmit = Boolean(formConfig?.endpoint);
       if (!shouldAutoSubmit && !onSubmit) {
         return;
@@ -994,12 +1015,21 @@ function useContactForm(options) {
           await onSubmit(submissionValues);
         }
         if (shouldAutoSubmit || onSubmit) {
-          setIsSubmitted(true);
+          try {
+            await submissionConfig?.handleFormSubmission?.({
+              formData: submissionValues,
+              responseData: result
+            });
+          } catch (callbackError) {
+            console.error("handleFormSubmission callback failed:", callbackError);
+          }
           if (resetOnSuccess) {
             helpers.resetForm();
           }
           onSuccess?.(result);
-          setTimeout(() => setIsSubmitted(false), 1e4);
+          if (submissionConfig?.behavior === "redirect" && submissionConfig.redirectUrl) {
+            performRedirect();
+          }
         }
       } catch (error) {
         if (error instanceof PageSpeedFormSubmissionError && error.formErrors) {
@@ -1014,9 +1044,10 @@ function useContactForm(options) {
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   return {
     form,
-    isSubmitted,
+    isSubmitted: form.status === "success",
     submissionError,
-    formMethod
+    formMethod,
+    resetSubmissionState
   };
 }
 
@@ -1511,38 +1542,6 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var FormFeedback = ({
-  isSubmitted,
-  successMessageClassName,
-  successMessage,
-  submissionError,
-  errorMessageClassName
-}) => {
-  if (!isSubmitted && !submissionError) return null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isSubmitted && !submissionError && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "mb-6 p-4 bg-primary/10 border border-primary rounded-md",
-          successMessageClassName
-        ),
-        children: typeof successMessage === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-foreground/90 text-center", children: successMessage }) : successMessage
-      }
-    ),
-    submissionError && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "mb-6 p-4 bg-destructive/10 border border-destructive rounded-md",
-          errorMessageClassName
-        ),
-        children: typeof submissionError === "string" ? /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive text-center", children: submissionError }) : submissionError
-      }
-    )
-  ] });
-};
-var form_feedback_default = FormFeedback;
 var DEFAULT_FORM_FIELDS = [
   {
     name: "name",
@@ -1627,7 +1626,7 @@ function ContactFaq({
     removeFile,
     resetUpload
   } = useFileUpload({ onError });
-  const { form, isSubmitted, submissionError, formMethod } = useContactForm({
+  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
     formFields,
     formConfig,
     onSubmit,
@@ -1763,22 +1762,21 @@ function ContactFaq({
                     children: formHeading
                   }
                 ) : /* @__PURE__ */ jsx("div", { className: formHeadingClassName, children: formHeading })),
-                /* @__PURE__ */ jsx(
-                  form_feedback_default,
-                  {
-                    isSubmitted,
-                    successMessageClassName,
-                    successMessage,
-                    submissionError,
-                    errorMessageClassName
-                  }
-                ),
                 /* @__PURE__ */ jsxs(
                   Form,
                   {
                     form,
                     action: formConfig?.endpoint,
                     method: formMethod,
+                    submissionError,
+                    successMessage,
+                    successMessageClassName,
+                    errorMessageClassName,
+                    submissionConfig: formConfig?.submissionConfig,
+                    onNewSubmission: () => {
+                      resetUpload();
+                      resetSubmissionState();
+                    },
                     className: cn("space-y-4", formClassName),
                     children: [
                       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsx(

package/dist/contact-feedback.d.cts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { P as PageSpeedFormConfig } from './forms-nGgHUTBw.cjs';
-import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-k1_FqqBQ.cjs';
-import { A as ActionConfig } from './blocks-rgCERYOC.cjs';
+import { P as PageSpeedFormConfig } from './forms-CStlFhnh.cjs';
+import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-Bs7X576B.cjs';
+import { A as ActionConfig } from './blocks-DyVWHMtH.cjs';
 import '@page-speed/forms/integration';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface ContactFeedbackFormValues {

package/dist/contact-feedback.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { P as PageSpeedFormConfig } from './forms-nGgHUTBw.js';
-import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-AwBlQu1a.js';
-import { A as ActionConfig } from './blocks-ClXAGlHQ.js';
+import { P as PageSpeedFormConfig } from './forms-CStlFhnh.js';
+import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-CxYoHqdn.js';
+import { A as ActionConfig } from './blocks-S9tBV7Wg.js';
 import '@page-speed/forms/integration';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface ContactFeedbackFormValues {

package/dist/contact-fitness.d.cts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { P as PageSpeedFormConfig } from './forms-nGgHUTBw.cjs';
-import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-k1_FqqBQ.cjs';
-import { A as ActionConfig } from './blocks-rgCERYOC.cjs';
+import { P as PageSpeedFormConfig } from './forms-CStlFhnh.cjs';
+import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-Bs7X576B.cjs';
+import { A as ActionConfig } from './blocks-DyVWHMtH.cjs';
 import '@page-speed/forms/integration';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 
 interface ContactFitnessFormValues {

package/dist/contact-fitness.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { P as PageSpeedFormConfig } from './forms-nGgHUTBw.js';
-import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-AwBlQu1a.js';
-import { A as ActionConfig } from './blocks-ClXAGlHQ.js';
+import { P as PageSpeedFormConfig } from './forms-CStlFhnh.js';
+import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-CxYoHqdn.js';
+import { A as ActionConfig } from './blocks-S9tBV7Wg.js';
 import '@page-speed/forms/integration';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 
 interface ContactFitnessFormValues {

package/dist/contact-floating-banner.d.cts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { A as ActionConfig } from './blocks-rgCERYOC.cjs';
-import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-k1_FqqBQ.cjs';
+import { A as ActionConfig } from './blocks-DyVWHMtH.cjs';
+import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-Bs7X576B.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-8mtEHxev.cjs';
 import 'class-variance-authority/types';
 import 'react/jsx-runtime';
 

package/dist/contact-floating-banner.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { A as ActionConfig } from './blocks-ClXAGlHQ.js';
-import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-AwBlQu1a.js';
+import { A as ActionConfig } from './blocks-S9tBV7Wg.js';
+import { f as SectionBackground, g as SectionSpacing, s as PatternName } from './community-initiatives-CxYoHqdn.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-8mtEHxev.js';
 import 'class-variance-authority/types';
 import 'react/jsx-runtime';