@opensite/ui 2.1.7 → 2.1.9

package/dist/contact-faq.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { FormEngineProps } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
 import 'react/jsx-runtime';
-import './blocks-DRE-f6cS.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface FaqItem {

package/dist/contact-faq.js

@@ -541,7 +541,7 @@ function ContactFaq({
   accordionContentClassName,
   gridClassName,
   background,
-  spacing = "py-8 md:py-32",
+  spacing = "py-16 md:py-32",
   pattern,
   patternOpacity
 }) {
@@ -617,7 +617,7 @@ function ContactFaq({
                 "h2",
                 {
                   className: cn(
-                    "mb-3 text-3xl md:text-5xl font-bold tracking-tight text-balance",
+                    "mb-3 text-3xl md:text-5xl font-bold tracking-tight text-pretty",
                     headingClassName
                   ),
                   children: heading
@@ -627,7 +627,7 @@ function ContactFaq({
                 "p",
                 {
                   className: cn(
-                    "leading-relaxed text-balance",
+                    "leading-relaxed text-lg text-pretty md:text-balance",
                     descriptionClassName
                   ),
                   children: description

package/dist/contact-feedback.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
-import { A as ActionConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ContactFeedbackProps {

package/dist/contact-feedback.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
-import { A as ActionConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { A as ActionConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ContactFeedbackProps {

package/dist/contact-fitness.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
-import { A as ActionConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ContactFitnessProps {

package/dist/contact-fitness.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
-import { A as ActionConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { A as ActionConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ContactFitnessProps {

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { A as ActionConfig } from './blocks-tmd_MRJv.cjs';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.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-DRE-f6cS.js';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { A as ActionConfig } from './blocks-k17uluAz.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 import 'react/jsx-runtime';
 

package/dist/contact-guest.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
-import { A as ActionConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ContactGuestProps {

package/dist/contact-guest.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
-import { A as ActionConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { A as ActionConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ContactGuestProps {

package/dist/contact-help-center.d.cts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
 import 'react/jsx-runtime';
-import './blocks-tmd_MRJv.cjs';
+import './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ContactHelpCenterItem {

package/dist/contact-help-center.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
 import 'react/jsx-runtime';
-import './blocks-DRE-f6cS.js';
+import './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ContactHelpCenterItem {

package/dist/contact-image.cjs

@@ -8,6 +8,7 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
+var img = require('@page-speed/img');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -901,9 +902,6 @@ function ContactImage({
   actionsSlot,
   formFields = DEFAULT_FORM_FIELDS,
   successMessage = "Thank you! Your message has been sent successfully.",
-  className,
-  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
-  headerClassName,
   headingClassName,
   descriptionClassName,
   cardClassName,
@@ -912,8 +910,13 @@ function ContactImage({
   submitClassName,
   successMessageClassName,
   errorMessageClassName,
-  background = "white",
-  spacing = "xl",
+  backgroundImage,
+  background,
+  optixFlowConfig,
+  spacing = "none",
+  className,
+  containerClassName = "px-0 sm:px-0 lg:px-0 max-w-full relative z-10 h-screen w-screen flex justify-center items-center",
+  contentClassName = "",
   pattern,
   patternOpacity = 0.1,
   formConfig,
@@ -971,97 +974,127 @@ function ContactImage({
     }
     return null;
   }, [actionsSlot, actions]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const renderBackground = React.useMemo(() => {
+    if (!backgroundImage) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: backgroundImage,
+          alt: "Full screen background image",
+          className: "h-full w-full object-cover",
+          loading: "eager",
+          optixFlowConfig
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-linear-to-b from-black/80 via-black/65 to-black/20" })
+    ] });
+  }, [backgroundImage, optixFlowConfig]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
       background,
       spacing,
       pattern,
       patternOpacity,
-      className: cn("py-12", className),
+      className: cn(
+        "relative flex h-full min-h-screen w-screen items-center justify-center overflow-hidden bg-black pb-0 pt-0 md:pt-0 px-0",
+        className
+      ),
       containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-4xl", 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 text-balance",
-                headingClassName
-              ),
-              children: heading
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "leading-relaxed text-balance",
-                descriptionClassName
-              ),
-              children: description
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: description }))
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
-          forms.Form,
+      children: [
+        renderBackground,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            form,
-            notificationConfig: {
-              submissionError,
-              successMessage
-            },
-            styleConfig: {
-              formClassName: cn("space-y-4", formClassName),
-              successMessageClassName,
-              errorMessageClassName
-            },
-            formConfig: {
-              endpoint: formConfig?.endpoint,
-              method: formMethod,
-              submissionConfig: formConfig?.submissionConfig
-            },
-            onNewSubmission: () => {
-              resetUpload();
-              resetSubmissionState();
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+            className: cn(
+              "flex flex-col gap-4 md:gap-6 px-6 pt-28 pb-6 md:pt-0 md:pb-0",
+              "relative z-30 m-auto max-w-full md:max-w-md flex-col items-center justify-center text-center",
+              contentClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn("mx-auto max-w-xl", cardClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: [
+              heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-5xl md:text-6xl lg:text-7xl text-card-foreground text-shadow-2xl font-semibold",
+                    headingClassName
+                  ),
+                  children: heading
+                }
+              ) : heading),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
                 {
-                  className: integration.getColumnSpanClass(field.columnSpan),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    integration.DynamicFormField,
-                    {
-                      field,
-                      uploadProgress,
-                      onFileUpload: uploadFiles,
-                      onFileRemove: removeFile,
-                      isUploading
-                    }
-                  )
-                },
-                field.name
-              )) }),
-              actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
-                Pressable,
+                  className: cn(
+                    "text-center text-base text-balance text-card-foreground text-shadow-2xl",
+                    descriptionClassName
+                  ),
+                  children: description
+                }
+              ) : description),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                forms.Form,
                 {
-                  componentType: "button",
-                  type: "submit",
-                  className: cn("w-full", submitClassName),
-                  size: "lg",
-                  asButton: true,
-                  disabled: form.isSubmitting,
+                  form,
+                  notificationConfig: {
+                    submissionError,
+                    successMessage
+                  },
+                  styleConfig: {
+                    formClassName: cn("space-y-4", formClassName),
+                    successMessageClassName,
+                    errorMessageClassName
+                  },
+                  formConfig: {
+                    endpoint: formConfig?.endpoint,
+                    method: formMethod,
+                    submissionConfig: formConfig?.submissionConfig
+                  },
+                  onNewSubmission: () => {
+                    resetUpload();
+                    resetSubmissionState();
+                  },
                   children: [
-                    buttonIcon,
-                    buttonText
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: integration.getColumnSpanClass(field.columnSpan),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          integration.DynamicFormField,
+                          {
+                            field,
+                            uploadProgress,
+                            onFileUpload: uploadFiles,
+                            onFileRemove: removeFile,
+                            isUploading
+                          }
+                        )
+                      },
+                      field.name
+                    )) }),
+                    actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
+                      Pressable,
+                      {
+                        componentType: "button",
+                        type: "submit",
+                        className: cn("w-full", submitClassName),
+                        size: "lg",
+                        asButton: true,
+                        disabled: form.isSubmitting,
+                        children: [
+                          buttonIcon,
+                          buttonText
+                        ]
+                      }
+                    )
                   ]
                 }
               )
-            ]
+            ] }) })
           }
-        ) }) })
-      ] })
+        )
+      ]
     }
   );
 }

package/dist/contact-image.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-CPyEa7IX.cjs';
-import { A as ActionConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ContactImageProps {
@@ -76,6 +76,21 @@ interface ContactImageProps {
     onSuccess?: (data: unknown) => void;
     /** Error callback */
     onError?: (error: Error) => void;
+    /**
+     * Additional CSS classes for the content container
+     */
+    contentClassName?: string;
+    /**
+     * Background image URL
+     */
+    backgroundImage?: string;
+    /**
+     * Optional Optix Flow configuration for image optimization
+     */
+    optixFlowConfig?: {
+        apiKey: string;
+        compression?: number;
+    };
 }
 /**
  * ContactImage - Contact form with flexible field configuration
@@ -88,6 +103,6 @@ interface ContactImageProps {
  * />
  * ```
  */
-declare function ContactImage({ heading, description, buttonText, buttonIcon, actions, actionsSlot, formFields, successMessage, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, successMessageClassName, errorMessageClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactImageProps): React.JSX.Element;
+declare function ContactImage({ heading, description, buttonText, buttonIcon, actions, actionsSlot, formFields, successMessage, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, successMessageClassName, errorMessageClassName, backgroundImage, background, optixFlowConfig, spacing, className, containerClassName, contentClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactImageProps): React.JSX.Element;
 
 export { ContactImage, type ContactImageProps };

package/dist/contact-image.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { FormFieldConfig, PageSpeedFormConfig } from '@page-speed/forms/integration';
-import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-hxnFe3w6.js';
-import { A as ActionConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { A as ActionConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ContactImageProps {
@@ -76,6 +76,21 @@ interface ContactImageProps {
     onSuccess?: (data: unknown) => void;
     /** Error callback */
     onError?: (error: Error) => void;
+    /**
+     * Additional CSS classes for the content container
+     */
+    contentClassName?: string;
+    /**
+     * Background image URL
+     */
+    backgroundImage?: string;
+    /**
+     * Optional Optix Flow configuration for image optimization
+     */
+    optixFlowConfig?: {
+        apiKey: string;
+        compression?: number;
+    };
 }
 /**
  * ContactImage - Contact form with flexible field configuration
@@ -88,6 +103,6 @@ interface ContactImageProps {
  * />
  * ```
  */
-declare function ContactImage({ heading, description, buttonText, buttonIcon, actions, actionsSlot, formFields, successMessage, className, containerClassName, headerClassName, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, successMessageClassName, errorMessageClassName, background, spacing, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactImageProps): React.JSX.Element;
+declare function ContactImage({ heading, description, buttonText, buttonIcon, actions, actionsSlot, formFields, successMessage, headingClassName, descriptionClassName, cardClassName, cardContentClassName, formClassName, submitClassName, successMessageClassName, errorMessageClassName, backgroundImage, background, optixFlowConfig, spacing, className, containerClassName, contentClassName, pattern, patternOpacity, formConfig, onSubmit, onSuccess, onError, }: ContactImageProps): React.JSX.Element;
 
 export { ContactImage, type ContactImageProps };