@opensite/ui 2.4.9 → 2.5.1

package/dist/offer-modal-membership-image.js

@@ -1,8 +1,6 @@
 "use client";
 import * as React from 'react';
 import React__default from 'react';
-import { useForm, Form, Field } from '@page-speed/forms';
-import { TextInput as TextInput$1 } from '@page-speed/forms/inputs';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -10,10 +8,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import { Icon } from '@page-speed/icon';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { submitPageSpeedForm, PageSpeedFormSubmissionError, isValidEmail } from '@page-speed/forms/integration';
+import { FormEngine } from '@page-speed/forms/integration';
 
 // components/blocks/offer-modal/offer-modal-membership-image.tsx
-var TextInput = TextInput$1;
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -749,7 +746,8 @@ var spacingStyles = {
   sm: "py-12 md:py-16",
   md: "py-16 md:py-24",
   lg: "py-20 md:py-32",
-  xl: "py-24 md:py-40"
+  xl: "py-24 md:py-40",
+  hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
@@ -919,25 +917,34 @@ function DialogDescription({
     }
   );
 }
-var { useMemo: useMemo2 } = React;
+var DEFAULT_STYLE_RULES = {
+  formContainer: "flex items-stretch w-full",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: ""
+};
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function OfferModalMembershipImage({
   overline,
   title,
   description,
   image,
   imageSlot,
-  emailPlaceholder,
-  buttonText,
   closeButtonSlot,
   formSlot,
   footerSlot,
   open,
   onOpenChange,
   defaultOpen = true,
-  onSubmit,
-  formConfig,
-  onSuccess,
-  onError,
   className,
   imageWrapperClassName,
   imageClassName,
@@ -946,70 +953,46 @@ function OfferModalMembershipImage({
   titleClassName,
   descriptionClassName,
   formClassName,
-  inputClassName,
-  submitClassName,
   closeClassName,
   footerClassName,
   optixFlowConfig,
-  background = "default"
+  background = "default",
+  formEngineSetup,
+  buttonAction
 }) {
-  const form = useForm({
-    initialValues: {
-      email: ""
-    },
-    validationSchema: {
-      email: (value) => {
-        if (!value) return "Please enter an email address";
-        if (!isValidEmail(value)) {
-          return "Please enter a valid email address";
-        }
-        return void 0;
-      }
-    },
-    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.email);
-        }
-        if (shouldAutoSubmit || onSubmit) {
-          if (formConfig?.resetOnSuccess !== false) {
-            helpers.resetForm();
-          }
-          onSuccess?.(result);
-        }
-      } catch (error) {
-        if (error instanceof PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
-        }
-        onError?.(error);
-        throw error;
-      }
-    }
-  });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderImage = useMemo2(() => {
+  const renderImage = React.useMemo(() => {
     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(
-      Img,
+    return /* @__PURE__ */ jsx(
+      "div",
       {
-        src: image.src,
-        alt: image.alt,
-        className: cn("block size-full object-cover object-[50%_15%]", imageClassName),
-        optixFlowConfig
+        className: cn(
+          "max-h-[290px] h-full overflow-hidden max-lg:hidden",
+          imageWrapperClassName
+        ),
+        children: /* @__PURE__ */ jsx(
+          Img,
+          {
+            src: image.src,
+            alt: image.alt,
+            className: cn(
+              "block size-full object-cover object-[50%_15%]",
+              imageClassName
+            ),
+            optixFlowConfig
+          }
+        )
       }
-    ) });
-  }, [imageSlot, image, imageWrapperClassName, imageClassName, optixFlowConfig]);
-  const renderCloseButton = useMemo2(() => {
+    );
+  }, [
+    imageSlot,
+    image,
+    imageWrapperClassName,
+    imageClassName,
+    optixFlowConfig
+  ]);
+  const renderCloseButton = React.useMemo(() => {
     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,
@@ -1025,73 +1008,52 @@ function OfferModalMembershipImage({
       }
     ) }) });
   }, [closeButtonSlot, closeClassName]);
-  const renderForm = useMemo2(() => {
+  const renderForm = React.useMemo(() => {
     if (formSlot) return formSlot;
-    return /* @__PURE__ */ jsxs(
-      Form,
+    if (!formEngineSetup) return null;
+    const defaultButtonAction = {
+      label: "",
+      variant: "default",
+      icon: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsx(
+      FormEngine,
       {
-        form,
-        action: formConfig?.endpoint,
-        method: formMethod,
-        className: cn("space-y-2.5", formClassName),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-            /* @__PURE__ */ jsx(
-              Field,
-              {
-                name: "email",
-                className: "flex-1",
-                children: ({ field, meta }) => /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
-                  /* @__PURE__ */ jsx(
-                    TextInput,
-                    {
-                      ...field,
-                      type: "email",
-                      placeholder: emailPlaceholder,
-                      error: (meta.touched || form.status === "error") && !!meta.error,
-                      className: cn("w-full pr-10", inputClassName),
-                      "aria-label": emailPlaceholder || "Email address"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/mail", size: 16 }) }),
-                  (meta.touched || form.status === "error") && meta.error && /* @__PURE__ */ jsx("div", { className: "text-destructive mt-1 text-xs", children: meta.error })
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Pressable,
-              {
-                size: "icon",
-                variant: "default",
-                className: cn("lg:hidden", submitClassName),
-                asButton: true,
-                componentType: "button",
-                type: "submit",
-                disabled: form.isSubmitting,
-                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              className: cn("w-full max-lg:hidden", submitClassName),
-              variant: "default",
-              asButton: true,
-              componentType: "button",
-              type: "submit",
-              disabled: form.isSubmitting,
-              children: buttonText
+        formEngineSetup: {
+          ...formEngineSetup,
+          formLayoutSettings: {
+            ...formEngineSetup.formLayoutSettings,
+            formLayout: "button-group",
+            buttonGroupSetup: {
+              ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
+              size: "default",
+              submitLabel: action.icon || action.label,
+              submitVariant: action.variant || "default"
             }
-          )
-        ]
+          }
+        },
+        defaultFields: DEFAULT_FORM_FIELDS,
+        defaultStyleRules: {
+          ...DEFAULT_STYLE_RULES,
+          formContainer: cn(DEFAULT_STYLE_RULES.formContainer, formClassName)
+        }
       }
     );
-  }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
-  const renderFooter = useMemo2(() => {
+  }, [formSlot, formEngineSetup, buttonAction, formClassName]);
+  const renderFooter = React.useMemo(() => {
     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 }) });
+    return /* @__PURE__ */ jsx(DialogFooter, { className: footerClassName, children: /* @__PURE__ */ jsx(
+      DialogDescription,
+      {
+        className: cn(
+          "text-muted-foreground text-center text-xs leading-relaxed",
+          descriptionClassName
+        ),
+        children: description
+      }
+    ) });
   }, [footerSlot, description, footerClassName, descriptionClassName]);
   return /* @__PURE__ */ jsx(Dialog, { ...dialogProps, children: /* @__PURE__ */ jsxs(
     DialogContent,
@@ -1104,14 +1066,41 @@ function OfferModalMembershipImage({
       children: [
         renderCloseButton,
         renderImage,
-        /* @__PURE__ */ jsx(Section, { background, spacing: "none", children: /* @__PURE__ */ jsxs("div", { className: cn("lg:px-15 space-y-5 overflow-y-auto px-9 py-5 lg:py-7", contentClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2.5", children: [
-            overline && (typeof overline === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center text-sm font-bold uppercase leading-none", overlineClassName), children: overline }) : /* @__PURE__ */ jsx("div", { className: overlineClassName, children: overline })),
-            title && /* @__PURE__ */ jsx(DialogTitle, { className: cn("text-center text-3xl font-bold", titleClassName), children: title })
-          ] }),
-          renderForm,
-          renderFooter
-        ] }) })
+        /* @__PURE__ */ jsx(Section, { background, spacing: "none", children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "lg:px-15 space-y-5 overflow-y-auto px-9 py-5 lg:py-7",
+              contentClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-2.5", children: [
+                overline && (typeof overline === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-center text-sm font-bold uppercase leading-none",
+                      overlineClassName
+                    ),
+                    children: overline
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: overlineClassName, children: overline })),
+                title && /* @__PURE__ */ jsx(
+                  DialogTitle,
+                  {
+                    className: cn(
+                      "text-center text-3xl font-bold",
+                      titleClassName
+                    ),
+                    children: title
+                  }
+                )
+              ] }),
+              renderForm,
+              renderFooter
+            ]
+          }
+        ) })
       ]
     }
   ) });

package/dist/offer-modal-newsletter-discount.cjs

@@ -2,14 +2,12 @@
 'use strict';
 
 var React = require('react');
-var forms = require('@page-speed/forms');
-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 DialogPrimitive = require('@radix-ui/react-dialog');
 var icon = require('@page-speed/icon');
+var DialogPrimitive = require('@radix-ui/react-dialog');
 var integration = require('@page-speed/forms/integration');
 
 function _interopNamespace(e) {
@@ -34,7 +32,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 
 // components/blocks/offer-modal/offer-modal-newsletter-discount.tsx
-var TextInput = inputs.TextInput;
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -456,6 +453,10 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
+var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
+function DynamicIcon({ apiKey, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -766,7 +767,8 @@ var spacingStyles = {
   sm: "py-12 md:py-16",
   md: "py-16 md:py-24",
   lg: "py-20 md:py-32",
-  xl: "py-24 md:py-40"
+  xl: "py-24 md:py-40",
+  hero: "pt-32 pb-12 md:pt-40 md:pb-40"
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
@@ -831,10 +833,6 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
-function DynamicIcon({ apiKey, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
-}
 function Dialog({
   ...props
 }) {
@@ -924,11 +922,24 @@ function DialogTitle({
     }
   );
 }
-var { useMemo: useMemo2 } = React__namespace;
+var DEFAULT_STYLE_RULES = {
+  formContainer: "flex items-stretch w-full",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: ""
+};
+var DEFAULT_FORM_FIELDS = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function OfferModalNewsletterDiscount({
   title,
-  emailPlaceholder,
-  buttonText,
   closeButtonText,
   closeButtonSlot,
   formSlot,
@@ -937,121 +948,81 @@ function OfferModalNewsletterDiscount({
   onOpenChange,
   defaultOpen = true,
   closeOnOutsideClick = false,
-  onSubmit,
-  formConfig,
-  onSuccess,
-  onError,
   className,
   contentClassName,
   headerClassName,
   titleClassName,
   formClassName,
-  inputClassName,
-  submitClassName,
   closeClassName,
-  background = "default"
+  background = "default",
+  formEngineSetup,
+  buttonAction
 }) {
-  const form = forms.useForm({
-    initialValues: {
-      email: ""
-    },
-    validationSchema: {
-      email: (value) => {
-        if (!value) return "Email is required";
-        if (!integration.isValidEmail(value)) return "Please enter a valid email address";
-        return void 0;
-      }
-    },
-    onSubmit: async (values, helpers) => {
-      const shouldAutoSubmit = Boolean(formConfig?.endpoint);
-      if (!shouldAutoSubmit && !onSubmit) {
-        return;
-      }
-      try {
-        let result;
-        if (shouldAutoSubmit) {
-          result = await integration.submitPageSpeedForm(values, formConfig);
-        }
-        if (onSubmit) {
-          await onSubmit(values.email);
-        }
-        if (shouldAutoSubmit || onSubmit) {
-          if (formConfig?.resetOnSuccess !== false) {
-            helpers.resetForm();
-          }
-          onSuccess?.(result);
-        }
-      } catch (error) {
-        if (error instanceof integration.PageSpeedFormSubmissionError && error.formErrors) {
-          helpers.setErrors(error.formErrors);
-        }
-        onError?.(error);
-        throw error;
-      }
-    }
-  });
-  const formMethod = formConfig?.method?.toLowerCase() === "get" ? "get" : "post";
   const dialogProps = open !== void 0 ? { open, onOpenChange } : { defaultOpen };
-  const renderCloseButton = useMemo2(() => {
+  const renderCloseButton = React__namespace.useMemo(() => {
     if (closeButtonSlot) return closeButtonSlot;
     if (!closeButtonText) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute end-1.5 top-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
         variant: "ghost",
-        className: cn("text-muted-foreground text-xs uppercase", closeClassName),
+        className: cn(
+          "text-muted-foreground text-xs uppercase",
+          closeClassName
+        ),
         size: "sm",
         asButton: true,
         children: closeButtonText
       }
     ) }) });
   }, [closeButtonSlot, closeButtonText, closeClassName]);
-  const renderHeader = useMemo2(() => {
+  const renderHeader = React__namespace.useMemo(() => {
     if (headerSlot) return headerSlot;
     if (!title) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { className: headerClassName, children: typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: cn("text-start font-serif text-2xl font-normal leading-snug", titleClassName), children: title }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { className: headerClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
+      DialogTitle,
+      {
+        className: cn(
+          "text-start font-serif text-2xl font-normal leading-snug",
+          titleClassName
+        ),
+        children: title
+      }
+    ) });
   }, [headerSlot, title, headerClassName, titleClassName]);
-  const renderForm = useMemo2(() => {
+  const renderForm = React__namespace.useMemo(() => {
     if (formSlot) return formSlot;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      forms.Form,
+    if (!formEngineSetup) return null;
+    const defaultButtonAction = {
+      label: "",
+      variant: "default",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      integration.FormEngine,
       {
-        form,
-        action: formConfig?.endpoint,
-        method: formMethod,
-        className: cn("space-y-2.5", formClassName),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(forms.Field, { name: "email", children: ({ field, meta }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              TextInput,
-              {
-                ...field,
-                type: "email",
-                placeholder: emailPlaceholder,
-                error: meta.touched && !!meta.error,
-                className: cn("w-full", inputClassName),
-                "aria-label": emailPlaceholder || "Email address",
-                required: true
-              }
-            ),
-            meta.touched && meta.error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-destructive text-xs mt-1", children: meta.error })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              componentType: "button",
-              type: "submit",
-              className: cn("w-full text-xs uppercase", submitClassName),
-              variant: "default",
-              asButton: true,
-              disabled: form.isSubmitting,
-              children: buttonText
+        formEngineSetup: {
+          ...formEngineSetup,
+          formLayoutSettings: {
+            ...formEngineSetup.formLayoutSettings,
+            formLayout: "button-group",
+            buttonGroupSetup: {
+              ...formEngineSetup.formLayoutSettings?.buttonGroupSetup,
+              size: "default",
+              submitLabel: action.icon || action.label,
+              submitVariant: action.variant || "default"
             }
-          )
-        ]
+          }
+        },
+        defaultFields: DEFAULT_FORM_FIELDS,
+        defaultStyleRules: {
+          ...DEFAULT_STYLE_RULES,
+          formContainer: cn(DEFAULT_STYLE_RULES.formContainer, formClassName)
+        }
       }
     );
-  }, [formSlot, form, formConfig, formMethod, emailPlaceholder, inputClassName, submitClassName, buttonText, formClassName]);
+  }, [formSlot, formEngineSetup, buttonAction, formClassName]);
   return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { ...dialogProps, modal: false, children: /* @__PURE__ */ jsxRuntime.jsx(
     DialogContent,
     {