@opensite/ui 2.1.2 → 2.1.3

package/dist/registry.js

@@ -12,7 +12,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { usePlatformFromUrl } from '@opensite/hooks/usePlatformFromUrl';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { Form, useForm, Field } from '@page-speed/forms';
-import { useFileUpload, useContactForm, DynamicFormField, submitPageSpeedForm, PageSpeedFormSubmissionError, isValidEmail, getColumnSpanClass } from '@page-speed/forms/integration';
+import { useFileUpload, useContactForm, DynamicFormField, submitPageSpeedForm, PageSpeedFormSubmissionError, isValidEmail, getColumnSpanClass, FormEngine } from '@page-speed/forms/integration';
 import { AnimatePresence, motion, useMotionValue, useMotionTemplate, useSpring, useTransform, useInView, useScroll, useMotionValueEvent } from 'framer-motion';
 import { TextInput as TextInput$1 } from '@page-speed/forms/inputs';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -14888,8 +14888,6 @@ function ContactFaq({
   formHeading,
   buttonText = "Submit",
   buttonIcon,
-  actions,
-  actionsSlot,
   items,
   itemsSlot,
   faqHeading,
@@ -14904,7 +14902,6 @@ function ContactFaq({
   cardContentClassName,
   formHeadingClassName,
   formClassName,
-  submitClassName,
   faqHeadingClassName,
   faqContainerClassName,
   accordionClassName,
@@ -14931,48 +14928,6 @@ function ContactFaq({
     removeFile,
     resetUpload
   } = useFileUpload({ onError });
-  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
-    formFields,
-    formConfig,
-    onSubmit,
-    onSuccess: (data) => {
-      resetUpload();
-      onSuccess?.(data);
-    },
-    onError,
-    resetOnSuccess: formConfig?.resetOnSuccess !== false,
-    uploadTokens
-  });
-  const actionsContent = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (actions && actions.length > 0) {
-      return actions.map((action, index) => {
-        const {
-          label,
-          icon,
-          iconAfter,
-          children,
-          className: actionClassName,
-          ...pressableProps
-        } = action;
-        return /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            asButton: true,
-            className: actionClassName,
-            ...pressableProps,
-            children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              icon,
-              label,
-              iconAfter
-            ] })
-          },
-          index
-        );
-      });
-    }
-    return null;
-  }, [actionsSlot, actions]);
   const hasFaqItems = itemsSlot || items && items.length > 0;
   const faqContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
@@ -15033,7 +14988,7 @@ function ContactFaq({
                   ),
                   children: heading
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+              ) : heading),
               description && (typeof description === "string" ? /* @__PURE__ */ jsx(
                 "p",
                 {
@@ -15043,7 +14998,7 @@ function ContactFaq({
                   ),
                   children: description
                 }
-              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ) : description)
             ]
           }
         ),
@@ -15067,62 +15022,38 @@ function ContactFaq({
                     children: formHeading
                   }
                 ) : /* @__PURE__ */ jsx("div", { className: formHeadingClassName, children: formHeading })),
-                /* @__PURE__ */ jsxs(
-                  Form,
+                /* @__PURE__ */ jsx(
+                  FormEngine,
                   {
-                    form,
-                    notificationConfig: {
-                      submissionError,
-                      successMessage
-                    },
-                    styleConfig: {
-                      formClassName: cn("space-y-6", formClassName),
-                      successMessageClassName,
-                      errorMessageClassName
-                    },
-                    formConfig: {
-                      endpoint: formConfig?.endpoint,
-                      method: formMethod,
-                      submissionConfig: formConfig?.submissionConfig
+                    api: formConfig,
+                    fields: formFields,
+                    formLayoutSettings: {
+                      formLayout: "standard",
+                      submitButtonSetup: {
+                        submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                          buttonIcon,
+                          buttonText
+                        ] })
+                      },
+                      styleRules: {
+                        formClassName: cn("space-y-6", formClassName),
+                        successMessageClassName,
+                        errorMessageClassName
+                      }
                     },
-                    onNewSubmission: () => {
+                    successMessage,
+                    onSubmit,
+                    onSuccess: (data) => {
                       resetUpload();
-                      resetSubmissionState();
+                      onSuccess?.(data);
                     },
-                    children: [
-                      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: getColumnSpanClass(field.columnSpan),
-                          children: /* @__PURE__ */ jsx(
-                            DynamicFormField,
-                            {
-                              field,
-                              uploadProgress,
-                              onFileUpload: uploadFiles,
-                              onFileRemove: removeFile,
-                              isUploading
-                            }
-                          )
-                        },
-                        field.name
-                      )) }),
-                      actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxs(
-                        Pressable,
-                        {
-                          componentType: "button",
-                          type: "submit",
-                          className: cn("w-full", submitClassName),
-                          size: "lg",
-                          asButton: true,
-                          disabled: form.isSubmitting,
-                          children: [
-                            buttonIcon,
-                            buttonText
-                          ]
-                        }
-                      )
-                    ]
+                    onError,
+                    resetOnSuccess: formConfig?.resetOnSuccess !== false,
+                    uploadTokens,
+                    uploadProgress,
+                    onFileUpload: uploadFiles,
+                    onFileRemove: removeFile,
+                    isUploading
                   }
                 )
               ] }) }),
@@ -20867,48 +20798,6 @@ function ContactVendor({
     removeFile,
     resetUpload
   } = useFileUpload({ onError });
-  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
-    formFields,
-    formConfig,
-    onSubmit,
-    onSuccess: (data) => {
-      resetUpload();
-      onSuccess?.(data);
-    },
-    onError,
-    resetOnSuccess: formConfig?.resetOnSuccess !== false,
-    uploadTokens
-  });
-  const actionsContent = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (actions && actions.length > 0) {
-      return actions.map((action, index) => {
-        const {
-          label,
-          icon,
-          iconAfter,
-          children,
-          className: actionClassName,
-          ...pressableProps
-        } = action;
-        return /* @__PURE__ */ jsx(
-          Pressable,
-          {
-            asButton: true,
-            className: actionClassName,
-            ...pressableProps,
-            children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-              icon,
-              label,
-              iconAfter
-            ] })
-          },
-          index
-        );
-      });
-    }
-    return null;
-  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -20941,62 +20830,38 @@ function ContactVendor({
             }
           ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
         ] }),
-        /* @__PURE__ */ jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxs(
-          Form,
-          {
-            form,
-            notificationConfig: {
-              submissionError,
-              successMessage
-            },
-            styleConfig: {
-              formClassName: cn("space-y-4", formClassName),
-              successMessageClassName,
-              errorMessageClassName
-            },
-            formConfig: {
-              endpoint: formConfig?.endpoint,
-              method: formMethod,
-              submissionConfig: formConfig?.submissionConfig
+        /* @__PURE__ */ jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsx(
+          FormEngine,
+          {
+            api: formConfig,
+            fields: formFields,
+            formLayoutSettings: {
+              formLayout: "standard",
+              submitButtonSetup: {
+                submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  buttonIcon,
+                  buttonText
+                ] })
+              },
+              styleRules: {
+                formClassName: cn("space-y-4", formClassName),
+                successMessageClassName,
+                errorMessageClassName
+              }
             },
-            onNewSubmission: () => {
+            successMessage,
+            onSubmit,
+            onSuccess: (data) => {
               resetUpload();
-              resetSubmissionState();
+              onSuccess?.(data);
             },
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: getColumnSpanClass(field.columnSpan),
-                  children: /* @__PURE__ */ jsx(
-                    DynamicFormField,
-                    {
-                      field,
-                      uploadProgress,
-                      onFileUpload: uploadFiles,
-                      onFileRemove: removeFile,
-                      isUploading
-                    }
-                  )
-                },
-                field.name
-              )) }),
-              actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxs(
-                Pressable,
-                {
-                  componentType: "button",
-                  type: "submit",
-                  className: cn("w-full", submitClassName),
-                  size: "lg",
-                  asButton: true,
-                  disabled: form.isSubmitting,
-                  children: [
-                    buttonIcon,
-                    buttonText
-                  ]
-                }
-              )
-            ]
+            onError,
+            resetOnSuccess: formConfig?.resetOnSuccess !== false,
+            uploadTokens,
+            uploadProgress,
+            onFileUpload: uploadFiles,
+            onFileRemove: removeFile,
+            isUploading
           }
         ) }) })
       ] })
@@ -57578,7 +57443,7 @@ function HeroSaasDashboardPreview({
       className: "h-12"
     };
     const action = buttonAction || defaultButtonAction;
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: "mt-12 w-full flex items-center justify-center", children: /* @__PURE__ */ jsxs(
       Form,
       {
         form,
@@ -57601,7 +57466,7 @@ function HeroSaasDashboardPreview({
           resetSubmissionState();
         },
         children: [
-          /* @__PURE__ */ jsx("div", { className: "mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md items-center gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-4 sm:flex-row sm:justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-md items-center gap-2", children: [
             formFields.map((field) => /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
               DynamicFormField,
               {
@@ -57627,7 +57492,7 @@ function HeroSaasDashboardPreview({
           helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm text-center mt-4"), children: helperText }) : helperText)
         ]
       }
-    );
+    ) });
   }, [
     formSlot,
     formFields,
@@ -57697,39 +57562,39 @@ function HeroSaasDashboardPreview({
       className: cn(className),
       containerClassName,
       children: /* @__PURE__ */ jsxs("div", { className: "pt-10 md:pt-0", children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-4xl text-center", headerClassName), children: [
-          renderBadge,
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsx(
-            "h1",
-            {
-              className: cn(
-                "mt-8 text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
-                headingClassName
-              ),
-              children: heading
-            }
-          )),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: cn(
-                "mt-6 text-lg md:text-xl text-balance",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-          renderForm
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mmx-auto text-center flex flex-col items-center gap-6 md:gap-8 max-w-full md:max-w-md",
+              headerClassName
+            ),
+            children: [
+              renderBadge,
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: cn(
+                    "text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl text-balance",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "text-lg md:text-xl text-balance",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description),
+              renderForm
+            ]
+          }
+        ),
         renderBrowserPreview
       ] })
     }
@@ -60348,17 +60213,6 @@ function HeroNewsletterMinimal({
     removeFile,
     resetUpload
   } = useFileUpload({ onError });
-  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
-    formFields,
-    formConfig,
-    onSubmit,
-    onSuccess: (data) => {
-      resetUpload();
-      onSuccess?.(data);
-    },
-    onError,
-    uploadTokens
-  });
   const renderStats = React23.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
@@ -60389,77 +60243,58 @@ function HeroNewsletterMinimal({
     if (formSlot) return formSlot;
     const defaultButtonAction = {
       label: "Subscribe",
-      variant: "default",
-      className: "h-12"
+      variant: "default"
     };
     const action = buttonAction || defaultButtonAction;
-    return /* @__PURE__ */ jsxs(
-      Form,
-      {
-        form,
-        fields: formFields,
-        notificationConfig: {
-          submissionError,
-          successMessage
-        },
-        formConfig: {
-          endpoint: formConfig?.endpoint,
-          method: formMethod,
-          submissionConfig: formConfig?.submissionConfig,
-          formLayout: "button-group",
-          buttonGroupSize: "lg",
-          submitLabel: action.label,
-          submitVariant: action.variant || "default"
-        },
-        onNewSubmission: () => {
-          resetUpload();
-          resetSubmissionState();
-        },
-        children: [
-          formFields.map((field) => /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
-            DynamicFormField,
-            {
-              field,
-              uploadProgress,
-              onFileUpload: uploadFiles,
-              onFileRemove: removeFile,
-              isUploading
-            }
-          ) }, field.name)),
-          /* @__PURE__ */ jsxs(
-            Pressable,
-            {
-              onClick: form.handleSubmit,
-              asButton: true,
-              variant: action.variant,
-              className: cn("h-12", action.className),
-              disabled: form.isSubmitting,
-              children: [
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(
+        FormEngine,
+        {
+          api: formConfig,
+          fields: formFields,
+          formLayoutSettings: {
+            formLayout: "button-group",
+            buttonGroupSetup: {
+              size: "lg",
+              submitLabel: /* @__PURE__ */ jsxs(Fragment$1, { children: [
                 action.label,
                 action.iconAfter
-              ]
+              ] }),
+              submitVariant: action.variant || "default"
             }
-          ),
-          helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
-        ]
-      }
-    );
+          },
+          successMessage,
+          onSubmit,
+          onSuccess: (data) => {
+            resetUpload();
+            onSuccess?.(data);
+          },
+          onError,
+          uploadTokens,
+          uploadProgress,
+          onFileUpload: uploadFiles,
+          onFileRemove: removeFile,
+          isUploading
+        }
+      ),
+      helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
+    ] });
   }, [
     formSlot,
     formFields,
-    form,
     formConfig,
-    formMethod,
     buttonAction,
+    uploadTokens,
     uploadProgress,
     uploadFiles,
     removeFile,
     isUploading,
-    submissionError,
     successMessage,
+    onSubmit,
+    onSuccess,
+    onError,
     helperText,
-    resetUpload,
-    resetSubmissionState
+    resetUpload
   ]);
   return /* @__PURE__ */ jsx(
     Section,
@@ -84410,7 +84245,7 @@ function ListSearchableGrid({
     }
   );
 }
-var { useMemo: useMemo432 } = React23;
+var { useMemo: useMemo431 } = React23;
 function OfferModalNewsletterDiscount({
   title,
   emailPlaceholder,
@@ -84478,7 +84313,7 @@ function OfferModalNewsletterDiscount({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderCloseButton = useMemo432(() => {
+  const renderCloseButton = useMemo431(() => {
     if (closeButtonSlot) return closeButtonSlot;
     if (!closeButtonText) return null;
     return /* @__PURE__ */ jsx("div", { className: "absolute end-1.5 top-1.5", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -84492,12 +84327,12 @@ function OfferModalNewsletterDiscount({
       }
     ) }) });
   }, [closeButtonSlot, closeButtonText, closeClassName]);
-  const renderHeader = useMemo432(() => {
+  const renderHeader = useMemo431(() => {
     if (headerSlot) return headerSlot;
     if (!title) return null;
     return /* @__PURE__ */ jsx(DialogHeader, { className: headerClassName, children: typeof title === "string" ? /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) : /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) });
   }, [headerSlot, title, headerClassName, titleClassName]);
-  const renderForm = useMemo432(() => {
+  const renderForm = useMemo431(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -84559,7 +84394,7 @@ function OfferModalNewsletterDiscount({
     }
   ) });
 }
-var { useMemo: useMemo433 } = React23;
+var { useMemo: useMemo432 } = React23;
 function OfferModalMembershipImage({
   overline,
   title,
@@ -84636,7 +84471,7 @@ function OfferModalMembershipImage({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderImage = useMemo433(() => {
+  const renderImage = useMemo432(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("max-h-[290px] h-full overflow-hidden max-lg:hidden", imageWrapperClassName), children: /* @__PURE__ */ jsx(
@@ -84649,7 +84484,7 @@ function OfferModalMembershipImage({
       }
     ) });
   }, [imageSlot, image, imageWrapperClassName, imageClassName, optixFlowConfig]);
-  const renderCloseButton = useMemo433(() => {
+  const renderCloseButton = useMemo432(() => {
     if (closeButtonSlot) return closeButtonSlot;
     return /* @__PURE__ */ jsx("div", { className: "absolute -end-px -top-px z-10", children: /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
       Pressable,
@@ -84665,7 +84500,7 @@ function OfferModalMembershipImage({
       }
     ) }) });
   }, [closeButtonSlot, closeClassName]);
-  const renderForm = useMemo433(() => {
+  const renderForm = useMemo432(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsxs(
       Form,
@@ -84728,7 +84563,7 @@ function OfferModalMembershipImage({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderFooter = useMemo433(() => {
+  const renderFooter = useMemo432(() => {
     if (footerSlot) return footerSlot;
     if (!description) return null;
     return /* @__PURE__ */ jsx(DialogFooter, { className: footerClassName, children: /* @__PURE__ */ jsx(DialogDescription, { className: cn("text-muted-foreground text-center text-xs leading-relaxed", descriptionClassName), children: description }) });
@@ -84848,7 +84683,7 @@ function SheetDescription({
     }
   );
 }
-var { useMemo: useMemo434 } = React23;
+var { useMemo: useMemo433 } = React23;
 function OfferModalSheetNewsletter({
   logo,
   logoSlot,
@@ -84931,7 +84766,7 @@ function OfferModalSheetNewsletter({
   });
   const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const sheetProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderLogo = useMemo434(() => {
+  const renderLogo = useMemo433(() => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
     const logoSrc = typeof logo.src === "string" ? logo.src : logo.src.light;
@@ -84945,7 +84780,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [logoSlot, logo, logoClassName, optixFlowConfig]);
-  const renderHeader = useMemo434(() => {
+  const renderHeader = useMemo433(() => {
     if (headerSlot) return headerSlot;
     return /* @__PURE__ */ jsxs(SheetHeader, { className: cn("gap-8 p-0", headerClassName), children: [
       renderLogo,
@@ -84955,7 +84790,7 @@ function OfferModalSheetNewsletter({
       ] })
     ] });
   }, [headerSlot, renderLogo, headerClassName, title, titleClassName, description, descriptionClassName]);
-  const renderForm = useMemo434(() => {
+  const renderForm = useMemo433(() => {
     if (formSlot) return formSlot;
     return /* @__PURE__ */ jsx(
       Form,
@@ -85003,7 +84838,7 @@ function OfferModalSheetNewsletter({
       }
     );
   }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderLegal = useMemo434(() => {
+  const renderLegal = useMemo433(() => {
     if (legalSlot) return legalSlot;
     if (!termsUrl || !termsText || !privacyUrl || !privacyText) return null;
     return /* @__PURE__ */ jsxs("p", { className: cn("text-muted-foreground text-xs", legalClassName), children: [
@@ -85017,7 +84852,7 @@ function OfferModalSheetNewsletter({
       "."
     ] });
   }, [legalSlot, termsUrl, termsText, privacyUrl, privacyText, legalClassName]);
-  const renderImage = useMemo434(() => {
+  const renderImage = useMemo433(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsx("div", { className: cn("h-1/2 basis-1/2", imageWrapperClassName), children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 1, className: "overflow-hidden", children: /* @__PURE__ */ jsx(