@opensite/ui 2.1.8 → 2.2.1

package/dist/contact-card.js

@@ -1,13 +1,12 @@
 "use client";
 import * as React from 'react';
-import React__default, { useMemo } from 'react';
-import { Form } from '@page-speed/forms';
+import React__default from 'react';
+import { FormEngine } from '@page-speed/forms/integration';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@page-speed/icon';
-import { useContactForm, getColumnSpanClass, DynamicFormField } from '@page-speed/forms/integration';
 
 // components/blocks/contact/contact-card.tsx
 function cn(...inputs) {
@@ -448,6 +447,16 @@ function Card({ className, ...props }) {
     }
   );
 }
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -823,168 +832,131 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var MOBILE_CLASSES = {
-  "fit-left": "items-start md:items-center",
-  "fit-center": "items-center",
-  "fit-right": "items-end md:items-center",
-  "full-left": "items-stretch md:items-center",
-  "full-center": "items-stretch md:items-center",
-  "full-right": "items-stretch md:items-center"
+var DEFAULT_STYLE_RULES = {
+  formContainer: "",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "space-y-6"
 };
-function BlockActions({
-  mobileConfig,
-  actionsClassName,
-  verticalSpacing = "mt-4 md:mt-8",
-  actions,
-  actionsSlot
-}) {
-  const width = mobileConfig?.width ?? "full";
-  const position = mobileConfig?.position ?? "center";
-  const mobileLayoutClass = MOBILE_CLASSES[`${width}-${position}`];
-  if (actionsSlot) {
-    return /* @__PURE__ */ jsx("div", { children: actionsSlot });
-  } else if (actions && actions?.length > 0) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "flex flex-col md:flex-row flex-wrap gap-4",
-          mobileLayoutClass,
-          actionsClassName,
-          verticalSpacing
-        ),
-        children: actions.map((action, index) => /* @__PURE__ */ jsx(ActionComponent, { action }, index))
-      }
-    );
-  } else {
-    return null;
-  }
-}
-function ActionComponent({ action }) {
-  const {
-    label,
-    icon,
-    iconAfter,
-    children,
-    href,
-    onClick,
-    className: actionClassName,
-    ...pressableProps
-  } = action;
-  return /* @__PURE__ */ jsx(
-    Pressable,
-    {
-      href,
-      onClick,
-      asButton: action.asButton ?? true,
-      className: actionClassName,
-      ...pressableProps,
-      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon,
-        label,
-        iconAfter
-      ] })
-    }
-  );
-}
 var DEFAULT_FORM_FIELDS = [
   {
-    name: "firstName",
+    name: "fullName",
     type: "text",
-    label: "First Name",
-    placeholder: "John",
+    label: "Full Name",
+    placeholder: "Full Name",
     required: true,
     columnSpan: 6
   },
   {
-    name: "lastName",
-    type: "text",
-    label: "Last Name",
-    placeholder: "Doe",
+    name: "email",
+    type: "email",
+    label: "Email",
+    placeholder: "your@email.com",
     required: true,
     columnSpan: 6
   },
   {
-    name: "email",
-    type: "email",
-    label: "Email Address",
-    placeholder: "john@example.com",
-    required: true,
+    name: "phone",
+    type: "tel",
+    label: "Phone",
+    placeholder: "+1 (555) 000-0000",
     columnSpan: 12
   },
   {
     name: "message",
     type: "textarea",
-    label: "Message",
-    placeholder: "How can we help you?",
+    label: "Your Message",
+    placeholder: "How can we help you today?",
     required: true,
     rows: 4,
     columnSpan: 12
-  },
-  {
-    name: "privacyPolicy",
-    type: "checkbox",
-    label: "I agree to the privacy policy",
-    required: true,
-    columnSpan: 12
   }
 ];
 function ContactCard({
-  heading,
-  description,
-  actions,
-  actionsSlot,
-  actionsClassName,
+  heading = "Get In Touch",
+  description = "We'd love to hear from you. Send us a message and we'll respond as soon as possible.",
+  buttonText = "Send Message",
+  buttonIcon,
   contactOptions,
   contactOptionsSlot,
-  formFields,
-  successMessage = "Thank you! We'll be in touch soon.",
+  socialLinks,
+  socialLinksSlot,
+  formEngineSetup,
   className,
   containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   cardClassName,
-  formClassName,
-  successMessageClassName,
-  errorMessageClassName,
+  cardContentClassName,
   infoPanelClassName,
   headingClassName,
   descriptionClassName,
   contactOptionsClassName,
+  socialLinksClassName,
+  gridClassName,
   background,
   spacing = "py-16 md:py-32",
   pattern,
-  patternOpacity,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError
+  patternOpacity
 }) {
-  const fields = useMemo(() => formFields || DEFAULT_FORM_FIELDS, [formFields]);
-  const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
-    formFields: fields,
-    formConfig,
-    onSubmit,
-    onSuccess,
-    onError
-  });
-  const contactOptionsContent = useMemo(() => {
+  const formStyleRules = React.useMemo(() => {
+    return {
+      formContainer: formEngineSetup?.formLayoutSettings?.styleRules?.formContainer ?? DEFAULT_STYLE_RULES.formContainer,
+      fieldsContainer: formEngineSetup?.formLayoutSettings?.styleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES.fieldsContainer,
+      fieldClassName: formEngineSetup?.formLayoutSettings?.styleRules?.fieldClassName ?? DEFAULT_STYLE_RULES.fieldClassName,
+      formClassName: formEngineSetup?.formLayoutSettings?.styleRules?.formClassName ?? DEFAULT_STYLE_RULES.formClassName,
+      successMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES.successMessageClassName,
+      errorMessageClassName: formEngineSetup?.formLayoutSettings?.styleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES.errorMessageClassName
+    };
+  }, [formEngineSetup?.formLayoutSettings?.styleRules]);
+  const formFields = React.useMemo(() => {
+    if (formEngineSetup?.fields && formEngineSetup.fields.length > 0) {
+      return formEngineSetup.fields;
+    }
+    return DEFAULT_FORM_FIELDS;
+  }, [formEngineSetup?.fields]);
+  const contactOptionsContent = React.useMemo(() => {
     if (contactOptionsSlot) return contactOptionsSlot;
     if (contactOptions && contactOptions.length > 0) {
-      return contactOptions.map((option, key) => /* @__PURE__ */ jsxs(
+      return contactOptions.map((option, key) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: option.icon,
+            size: 20,
+            className: "shrink-0 text-muted-foreground"
+          }
+        ),
+        option.href ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            href: option.href,
+            className: "text-sm font-medium text-muted-foreground",
+            children: option.info
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground", children: option.info })
+      ] }, key));
+    }
+    return null;
+  }, [contactOptionsSlot, contactOptions]);
+  const socialLinksContent = React.useMemo(() => {
+    if (socialLinksSlot) return socialLinksSlot;
+    if (socialLinks && socialLinks.length > 0) {
+      return socialLinks.map((social, key) => /* @__PURE__ */ jsx(
         Pressable,
         {
-          variant: "link",
-          href: option.href,
-          className: "gap-4 font-bold",
-          children: [
-            /* @__PURE__ */ jsx(DynamicIcon, { name: option.icon, size: 20 }),
-            option.info
-          ]
+          href: social.href,
+          className: cn(
+            "flex h-9 w-9 items-center justify-center",
+            "rounded-full transition-colors",
+            "text-muted-foreground hover:text-foreground"
+          ),
+          "aria-label": social.label,
+          children: /* @__PURE__ */ jsx(DynamicIcon, { name: social.icon, size: 18 })
         },
         key
       ));
     }
     return null;
-  }, [contactOptionsSlot, contactOptions]);
+  }, [socialLinksSlot, socialLinks]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -994,82 +966,87 @@ function ContactCard({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "grid items-start gap-10 md:gap-12 lg:grid-cols-2", children: [
-        /* @__PURE__ */ jsx(Card, { className: cn("p-6 lg:p-8 order-2 md:order-1", cardClassName), children: /* @__PURE__ */ jsxs(
-          Form,
-          {
-            form,
-            action: formConfig?.endpoint,
-            method: formMethod,
-            submissionError,
-            successMessage,
-            successMessageClassName,
-            errorMessageClassName,
-            submissionConfig: formConfig?.submissionConfig,
-            onNewSubmission: resetSubmissionState,
-            className: cn("space-y-6", formClassName),
-            children: [
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-6", children: fields.map((field) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: getColumnSpanClass(field.columnSpan),
-                  children: /* @__PURE__ */ jsx(DynamicFormField, { field })
+      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "grid items-start gap-10 md:gap-12 grid-cols-1 lg:grid-cols-2",
+            gridClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Card, { className: cn("order-2 lg:order-1 pt-0 pb-0", cardClassName), children: /* @__PURE__ */ jsx(CardContent, { className: cn("p-6 lg:p-8", cardContentClassName), children: formEngineSetup ? /* @__PURE__ */ jsx(
+              FormEngine,
+              {
+                ...formEngineSetup,
+                formLayoutSettings: {
+                  ...formEngineSetup.formLayoutSettings,
+                  formLayout: "standard",
+                  submitButtonSetup: {
+                    ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
+                    submitLabel: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      buttonIcon,
+                      buttonText
+                    ] })
+                  },
+                  styleRules: formStyleRules
                 },
-                field.name
-              )) }),
-              /* @__PURE__ */ jsx(
-                BlockActions,
-                {
-                  actions,
-                  actionsSlot,
-                  actionsClassName
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "flex flex-col items-start gap-2 md:gap-4 order-1 md:order-2",
-              infoPanelClassName
-            ),
-            children: [
-              heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  className: cn(
-                    "text-4xl lg:text-6xl font-bold tracking-tight text-pretty",
-                    headingClassName
-                  ),
-                  children: heading
-                }
-              ) : heading),
-              description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                "p",
-                {
-                  className: cn(
-                    "leading-relaxed text-pretty text-lg opacity-70",
-                    descriptionClassName
-                  ),
-                  children: description
-                }
-              ) : description),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "mt-4 space-y-4 w-full md:w-fit px-6 py-6 md:px-12 md:py-8 bg-muted rounded-xl text-sm md:text-normal flex flex-col items-start gap-1",
-                    contactOptionsClassName
+                fields: formFields
+              }
+            ) : null }) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col items-start gap-2 md:gap-4 order-1 lg:order-2",
+                  infoPanelClassName
+                ),
+                children: [
+                  heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      className: cn(
+                        "text-4xl lg:text-6xl font-bold tracking-tight text-pretty",
+                        headingClassName
+                      ),
+                      children: heading
+                    }
+                  ) : heading),
+                  description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: cn(
+                        "leading-relaxed text-pretty text-lg text-muted-foreground",
+                        descriptionClassName
+                      ),
+                      children: description
+                    }
+                  ) : description),
+                  contactOptionsContent && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mt-4 w-full rounded-xl bg-muted px-6 py-6 md:px-8 md:py-8 space-y-6",
+                        contactOptionsClassName
+                      ),
+                      children: contactOptionsContent
+                    }
                   ),
-                  children: contactOptionsContent
-                }
-              )
-            ]
-          }
-        )
-      ] }) })
+                  socialLinksContent && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mt-2 flex items-center gap-2",
+                        socialLinksClassName
+                      ),
+                      children: socialLinksContent
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) })
     }
   );
 }

package/dist/contact-careers.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-CnNAZvh6.cjs';
-import { A as ActionConfig } from './blocks-CFlYq-V7.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-OIpPF9yW.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ContactCareersProps {

package/dist/contact-careers.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-h9CHmGZ9.js';
-import { A as ActionConfig } from './blocks-BmrJXeAA.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-OIpPF9yW.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ContactCareersProps {

package/dist/contact-catering.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-CnNAZvh6.cjs';
-import { A as ActionConfig } from './blocks-CFlYq-V7.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-OIpPF9yW.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ContactCateringProps {

package/dist/contact-catering.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-h9CHmGZ9.js';
-import { A as ActionConfig } from './blocks-BmrJXeAA.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-OIpPF9yW.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ContactCateringProps {

package/dist/contact-consultation.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-CnNAZvh6.cjs';
-import { A as ActionConfig } from './blocks-CFlYq-V7.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-OIpPF9yW.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface ContactConsultationProps {

package/dist/contact-consultation.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-h9CHmGZ9.js';
-import { A as ActionConfig } from './blocks-BmrJXeAA.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-OIpPF9yW.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 interface ContactConsultationProps {