@opensite/ui 2.1.9 → 2.2.2

package/dist/contact-emergency.js

@@ -1,10 +1,9 @@
 "use client";
-import * as React from 'react';
-import React__default, { useMemo } from 'react';
-import { Form } from '@page-speed/forms';
-import { useFileUpload, useContactForm, getColumnSpanClass, DynamicFormField } from '@page-speed/forms/integration';
+import { FormEngine } from '@page-speed/forms/integration';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import * as React from 'react';
+import React__default from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Icon } from '@page-speed/icon';
@@ -810,32 +809,12 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-var DEFAULT_CONTACT_ITEMS = [
-  {
-    icon: "lucide/phone",
-    title: "Critical Hotline",
-    subtitle: "+1 (555) 911-0000",
-    href: "tel:+15559110000"
-  },
-  {
-    icon: "lucide/mail",
-    title: "Email Support",
-    subtitle: "emergency@support.com",
-    href: "mailto:emergency@support.com"
-  },
-  {
-    icon: "lucide/message-circle",
-    title: "Live Chat",
-    subtitle: "24/7 Available",
-    href: "#chat"
-  },
-  {
-    icon: "lucide/map-pin",
-    title: "Visit Us",
-    subtitle: "123 Support Lane",
-    href: "#location"
-  }
-];
+var DEFAULT_STYLE_RULES = {
+  formContainer: "",
+  fieldsContainer: "",
+  fieldClassName: "",
+  formClassName: "space-y-4"
+};
 var PRIORITIES = [
   {
     value: "critical",
@@ -910,82 +889,20 @@ var DEFAULT_FORM_FIELDS = [
 function ContactEmergency({
   heading,
   description,
-  contactItems = DEFAULT_CONTACT_ITEMS,
+  contactItems,
   buttonText = "Submit Emergency Request",
   buttonIcon,
-  actions,
-  actionsSlot,
-  formFields = DEFAULT_FORM_FIELDS,
-  successMessage = "Thank you! Your emergency request has been received.",
+  formEngineSetup,
   className,
   headerClassName,
   headingClassName,
   descriptionClassName,
-  formClassName,
-  submitClassName,
-  successMessageClassName,
-  errorMessageClassName,
-  spacing = "py-8 md:py-32",
-  containerClassName = "w-full max-w-full relative z-10 px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "py-16 md:py-32",
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
   background,
   pattern,
-  patternOpacity,
-  formConfig,
-  onSubmit,
-  onSuccess,
-  onError
+  patternOpacity
 }) {
-  const {
-    uploadTokens,
-    uploadProgress,
-    isUploading,
-    uploadFiles,
-    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 otherFields = formFields.filter((f) => f.name !== "priority");
-  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, { children: [
-              icon,
-              label,
-              iconAfter
-            ] })
-          },
-          index
-        );
-      });
-    }
-    return null;
-  }, [actionsSlot, actions]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -995,126 +912,89 @@ function ContactEmergency({
       patternOpacity,
       className,
       containerClassName,
-      children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
-        Form,
-        {
-          form,
-          notificationConfig: {
-            submissionError,
-            successMessage
-          },
-          styleConfig: {
-            formClassName,
-            successMessageClassName,
-            errorMessageClassName
-          },
-          formConfig: {
-            endpoint: formConfig?.endpoint,
-            method: formMethod,
-            submissionConfig: formConfig?.submissionConfig
-          },
-          onNewSubmission: () => {
-            resetUpload();
-            resetSubmissionState();
-          },
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsxs("div", { className: cn("p-0 md:p-12"), children: [
-              /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2 gap-12 md:gap-24", children: /* @__PURE__ */ jsx("div", { className: "border-b border-border/60 p-6 md:border-b-0 md:border-r md:border-border/60", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start gap-8 md:gap-12", children: /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: cn(
-                    "flex flex-col items-start gap-4 text-left",
-                    headerClassName
-                  ),
-                  children: [
-                    heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
-                      "h2",
-                      {
-                        className: cn(
-                          "text-4xl lg:text-5xl xl:text-6xl font-bold",
-                          headingClassName
-                        ),
-                        children: heading
-                      }
-                    ) : heading),
-                    description && (typeof description === "string" ? /* @__PURE__ */ jsx(
-                      "p",
-                      {
-                        className: cn(
-                          "leading-relaxed",
-                          descriptionClassName
-                        ),
-                        children: description
-                      }
-                    ) : description)
-                  ]
-                }
-              ) }) }) }),
-              contactItems && contactItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 w-full", children: contactItems.map((item, index) => /* @__PURE__ */ jsx(
-                Pressable,
-                {
-                  href: item.href,
-                  className: cn(
-                    "rounded-md border bg-muted ring-2",
-                    "text-muted-foreground px-4 py-3 flex",
-                    "justify-start items-start transition-shadow",
-                    "duration-500 hover:shadow-xl",
-                    item.className
-                  ),
-                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                    item.icon ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-2 rounded-xl border bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(
-                      DynamicIcon,
-                      {
-                        name: item.icon,
-                        size: item.iconSize ?? 24
-                      }
-                    ) }) : null,
-                    /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsx("p", { className: "font-bold text-xs uppercase opacity-70", children: item.title }),
-                      /* @__PURE__ */ jsx("p", { className: "text-md font-semibold", children: item.subtitle })
-                    ] })
-                  ] })
-                },
-                index
-              )) })
-            ] }) }),
-            /* @__PURE__ */ jsx("div", { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-              /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-4", children: otherFields.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: [
+      children: /* @__PURE__ */ jsxs("div", { className: "grid md:grid-cols-2 gap-12 md:gap-28", children: [
+        /* @__PURE__ */ jsx("div", { className: "h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-between h-full gap-8 md:gap-12", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col items-start gap-4 text-left",
+                headerClassName
+              ),
+              children: [
+                heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    className: cn(
+                      "text-4xl lg:text-5xl xl:text-6xl font-bold text-pretty",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : heading),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "leading-relaxed text-pretty md:text-balance text-lg",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : description)
+              ]
+            }
+          ),
+          contactItems && contactItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 md:gap-6 w-full", children: contactItems.map((item, index) => /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: item.href,
+              className: cn(
+                "rounded-xl border bg-transparent hover:bg-muted ring-2",
+                "px-4 py-4 flex",
+                "justify-start items-start transition-all",
+                "duration-500 hover:text-muted-foreground",
+                item.className
+              ),
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+                item.icon ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-2 rounded-xl border bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx(
+                  DynamicIcon,
+                  {
+                    name: item.icon,
+                    size: item.iconSize ?? 24
+                  }
+                ) }) : null,
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("p", { className: "font-bold text-xs uppercase opacity-70", children: item.title }),
+                  /* @__PURE__ */ jsx("p", { className: "text-md font-medium", children: item.subtitle })
+                ] })
+              ] })
+            },
+            index
+          )) })
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "p-6", children: formEngineSetup ? /* @__PURE__ */ jsx(
+          FormEngine,
+          {
+            formEngineSetup: {
+              ...formEngineSetup,
+              formLayoutSettings: {
+                ...formEngineSetup.formLayoutSettings,
+                formLayout: "standard",
+                submitButtonSetup: {
+                  ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
+                  submitLabel: /* @__PURE__ */ jsxs(Fragment, { children: [
                     buttonIcon,
                     buttonText
-                  ]
+                  ] })
                 }
-              )
-            ] }) })
-          ]
-        }
-      ) })
+              }
+            },
+            defaultFields: DEFAULT_FORM_FIELDS,
+            defaultStyleRules: DEFAULT_STYLE_RULES
+          }
+        ) : null })
+      ] })
     }
   );
 }

package/dist/contact-faq.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React3 = require('react');
+var React = require('react');
 var integration = require('@page-speed/forms/integration');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -9,6 +9,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var icon = require('@page-speed/icon');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -27,7 +29,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var React__default = /*#__PURE__*/_interopDefault(React);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
 // components/blocks/contact/contact-faq.tsx
@@ -130,7 +132,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React3__namespace.default.forwardRef(
+var Container = React__default.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -435,7 +437,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React3__namespace.default.forwardRef(
+var Section = React__default.default.forwardRef(
   ({
     id,
     title,
@@ -567,25 +569,8 @@ function ContactFaq({
   pattern,
   patternOpacity
 }) {
-  const formStyleRules = React3__namespace.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 = React3__namespace.useMemo(() => {
-    if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
-      return formEngineSetup.fields;
-    } else {
-      return DEFAULT_FORM_FIELDS;
-    }
-  }, [formEngineSetup?.fields]);
   const hasFaqItems = itemsSlot || items && items.length > 0;
-  const faqContent = React3.useMemo(() => {
+  const faqContent = React.useMemo(() => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "single", collapsible: true, className: accordionClassName, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -677,24 +662,26 @@ function ContactFaq({
                     ),
                     children: formHeading
                   }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: formHeadingClassName, children: formHeading })),
+                ) : formHeading),
                 formEngineSetup ? /* @__PURE__ */ jsxRuntime.jsx(
                   integration.FormEngine,
                   {
-                    ...formEngineSetup,
-                    formLayoutSettings: {
-                      ...formEngineSetup.formLayoutSettings,
-                      formLayout: "standard",
-                      submitButtonSetup: {
-                        ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
-                        submitLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                          buttonIcon,
-                          buttonText
-                        ] })
-                      },
-                      styleRules: formStyleRules
+                    formEngineSetup: {
+                      ...formEngineSetup,
+                      formLayoutSettings: {
+                        ...formEngineSetup.formLayoutSettings,
+                        formLayout: "standard",
+                        submitButtonSetup: {
+                          ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
+                          submitLabel: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                            buttonIcon,
+                            buttonText
+                          ] })
+                        }
+                      }
                     },
-                    fields: formFields
+                    defaultFields: DEFAULT_FORM_FIELDS,
+                    defaultStyleRules: DEFAULT_STYLE_RULES
                   }
                 ) : null
               ] }) }),

package/dist/contact-faq.js

@@ -1,6 +1,5 @@
 "use client";
-import * as React3 from 'react';
-import React3__default, { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { FormEngine } from '@page-speed/forms/integration';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -108,7 +107,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React3__default.forwardRef(
+var Container = React.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -413,7 +412,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React3__default.forwardRef(
+var Section = React.forwardRef(
   ({
     id,
     title,
@@ -545,23 +544,6 @@ function ContactFaq({
   pattern,
   patternOpacity
 }) {
-  const formStyleRules = React3.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 = React3.useMemo(() => {
-    if (formEngineSetup && formEngineSetup?.fields && formEngineSetup?.fields?.length > 0) {
-      return formEngineSetup.fields;
-    } else {
-      return DEFAULT_FORM_FIELDS;
-    }
-  }, [formEngineSetup?.fields]);
   const hasFaqItems = itemsSlot || items && items.length > 0;
   const faqContent = useMemo(() => {
     if (itemsSlot) return itemsSlot;
@@ -655,24 +637,26 @@ function ContactFaq({
                     ),
                     children: formHeading
                   }
-                ) : /* @__PURE__ */ jsx("div", { className: formHeadingClassName, children: formHeading })),
+                ) : formHeading),
                 formEngineSetup ? /* @__PURE__ */ jsx(
                   FormEngine,
                   {
-                    ...formEngineSetup,
-                    formLayoutSettings: {
-                      ...formEngineSetup.formLayoutSettings,
-                      formLayout: "standard",
-                      submitButtonSetup: {
-                        ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
-                        submitLabel: /* @__PURE__ */ jsxs(Fragment, { children: [
-                          buttonIcon,
-                          buttonText
-                        ] })
-                      },
-                      styleRules: formStyleRules
+                    formEngineSetup: {
+                      ...formEngineSetup,
+                      formLayoutSettings: {
+                        ...formEngineSetup.formLayoutSettings,
+                        formLayout: "standard",
+                        submitButtonSetup: {
+                          ...formEngineSetup.formLayoutSettings?.submitButtonSetup,
+                          submitLabel: /* @__PURE__ */ jsxs(Fragment, { children: [
+                            buttonIcon,
+                            buttonText
+                          ] })
+                        }
+                      }
                     },
-                    fields: formFields
+                    defaultFields: DEFAULT_FORM_FIELDS,
+                    defaultStyleRules: DEFAULT_STYLE_RULES
                   }
                 ) : null
               ] }) }),