@page-speed/forms 0.6.7 → 0.6.9

package/dist/inputs.cjs

@@ -1,53 +1,53 @@
 'use strict';
 
-var chunkUQ6JPOBF_cjs = require('./chunk-UQ6JPOBF.cjs');
+var chunkI4EKHIVF_cjs = require('./chunk-I4EKHIVF.cjs');
 var chunkQMWZLGON_cjs = require('./chunk-QMWZLGON.cjs');
 
 
 
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
-  get: function () { return chunkUQ6JPOBF_cjs.Checkbox; }
+  get: function () { return chunkI4EKHIVF_cjs.Checkbox; }
 });
 Object.defineProperty(exports, "CheckboxGroup", {
   enumerable: true,
-  get: function () { return chunkUQ6JPOBF_cjs.CheckboxGroup; }
+  get: function () { return chunkI4EKHIVF_cjs.CheckboxGroup; }
 });
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
-  get: function () { return chunkUQ6JPOBF_cjs.DatePicker; }
+  get: function () { return chunkI4EKHIVF_cjs.DatePicker; }
 });
 Object.defineProperty(exports, "DateRangePicker", {
   enumerable: true,
-  get: function () { return chunkUQ6JPOBF_cjs.DateRangePicker; }
+  get: function () { return chunkI4EKHIVF_cjs.DateRangePicker; }
 });
 Object.defineProperty(exports, "FileInput", {
   enumerable: true,
-  get: function () { return chunkUQ6JPOBF_cjs.FileInput; }
+  get: function () { return chunkI4EKHIVF_cjs.FileInput; }
 });
 Object.defineProperty(exports, "MultiSelect", {
   enumerable: true,
-  get: function () { return chunkUQ6JPOBF_cjs.MultiSelect; }
+  get: function () { return chunkI4EKHIVF_cjs.MultiSelect; }
 });
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
-  get: function () { return chunkUQ6JPOBF_cjs.Radio; }
+  get: function () { return chunkI4EKHIVF_cjs.Radio; }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunkUQ6JPOBF_cjs.Select; }
+  get: function () { return chunkI4EKHIVF_cjs.Select; }
 });
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
-  get: function () { return chunkUQ6JPOBF_cjs.Switch; }
+  get: function () { return chunkI4EKHIVF_cjs.Switch; }
 });
 Object.defineProperty(exports, "TextArea", {
   enumerable: true,
-  get: function () { return chunkUQ6JPOBF_cjs.TextArea; }
+  get: function () { return chunkI4EKHIVF_cjs.TextArea; }
 });
 Object.defineProperty(exports, "TimePicker", {
   enumerable: true,
-  get: function () { return chunkUQ6JPOBF_cjs.TimePicker; }
+  get: function () { return chunkI4EKHIVF_cjs.TimePicker; }
 });
 Object.defineProperty(exports, "TextInput", {
   enumerable: true,

package/dist/inputs.js

@@ -1,4 +1,4 @@
-export { Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, MultiSelect, Radio, Select, Switch, TextArea, TimePicker } from './chunk-ML6FGUYS.js';
+export { Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, MultiSelect, Radio, Select, Switch, TextArea, TimePicker } from './chunk-AI5Q4N6D.js';
 export { TextInput } from './chunk-J37BGNM6.js';
 //# sourceMappingURL=inputs.js.map
 //# sourceMappingURL=inputs.js.map

package/dist/integration.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkL4I35PDU_cjs = require('./chunk-L4I35PDU.cjs');
-var chunkUQ6JPOBF_cjs = require('./chunk-UQ6JPOBF.cjs');
+var chunkI4EKHIVF_cjs = require('./chunk-I4EKHIVF.cjs');
 var chunkQMWZLGON_cjs = require('./chunk-QMWZLGON.cjs');
 var React2 = require('react');
 
@@ -674,7 +674,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "textarea" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkUQ6JPOBF_cjs.TextArea,
+      chunkI4EKHIVF_cjs.TextArea,
       {
         ...formField,
         id: fieldId,
@@ -685,7 +685,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "select" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkUQ6JPOBF_cjs.Select,
+      chunkI4EKHIVF_cjs.Select,
       {
         ...formField,
         id: fieldId,
@@ -696,7 +696,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "multi-select" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkUQ6JPOBF_cjs.MultiSelect,
+      chunkI4EKHIVF_cjs.MultiSelect,
       {
         ...formField,
         id: fieldId,
@@ -707,7 +707,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "radio" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkUQ6JPOBF_cjs.Radio,
+      chunkI4EKHIVF_cjs.Radio,
       {
         ...formField,
         id: fieldId,
@@ -721,7 +721,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "checkbox" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkUQ6JPOBF_cjs.Checkbox,
+      chunkI4EKHIVF_cjs.Checkbox,
       {
         ...formField,
         id: fieldId,
@@ -735,7 +735,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "checkbox-group" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkUQ6JPOBF_cjs.CheckboxGroup,
+      chunkI4EKHIVF_cjs.CheckboxGroup,
       {
         ...formField,
         id: fieldId,
@@ -749,7 +749,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), (field.type === "date-picker" || field.type === "date") && /* @__PURE__ */ React2__namespace.createElement(
-      chunkUQ6JPOBF_cjs.DatePicker,
+      chunkI4EKHIVF_cjs.DatePicker,
       {
         ...formField,
         id: fieldId,
@@ -759,7 +759,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "date-range" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkUQ6JPOBF_cjs.DateRangePicker,
+      chunkI4EKHIVF_cjs.DateRangePicker,
       {
         ...formField,
         id: fieldId,
@@ -769,7 +769,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "time" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkUQ6JPOBF_cjs.TimePicker,
+      chunkI4EKHIVF_cjs.TimePicker,
       {
         ...formField,
         id: fieldId,
@@ -779,7 +779,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "file" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkUQ6JPOBF_cjs.FileInput,
+      chunkI4EKHIVF_cjs.FileInput,
       {
         ...formField,
         id: fieldId,
@@ -816,22 +816,40 @@ var DEFAULT_SUBMIT_LABEL = "Submit";
 var DEFAULT_BUTTON_GROUP_LABEL = "Subscribe";
 var DEFAULT_BUTTON_VARIANT = "default";
 var DEFAULT_BUTTON_GROUP_SIZE = "default";
-function FormEngine({
-  api,
-  fields,
-  formLayoutSettings,
-  successMessage,
-  onSubmit,
-  onSuccess,
-  onError,
-  navigate,
-  resetOnSuccess,
-  uploadTokens: externalUploadTokens,
-  onFileUpload: externalOnFileUpload,
-  onFileRemove: externalOnFileRemove,
-  isUploading: externalIsUploading,
-  uploadProgress: externalUploadProgress
-}) {
+function FormEngine(props) {
+  const {
+    formEngineSetup,
+    defaultFields,
+    defaultStyleRules,
+    api: directApi,
+    fields: directFields,
+    formLayoutSettings: directFormLayoutSettings,
+    successMessage: directSuccessMessage,
+    onSubmit: directOnSubmit,
+    onSuccess: directOnSuccess,
+    onError: directOnError,
+    navigate: directNavigate,
+    resetOnSuccess: directResetOnSuccess,
+    uploadTokens: directUploadTokens,
+    onFileUpload: directOnFileUpload,
+    onFileRemove: directOnFileRemove,
+    isUploading: directIsUploading,
+    uploadProgress: directUploadProgress
+  } = props;
+  const api = directApi ?? formEngineSetup?.api;
+  const fields = directFields ?? formEngineSetup?.fields;
+  const formLayoutSettings = directFormLayoutSettings ?? formEngineSetup?.formLayoutSettings;
+  const successMessage = directSuccessMessage ?? formEngineSetup?.successMessage;
+  const onSubmit = directOnSubmit ?? formEngineSetup?.onSubmit;
+  const onSuccess = directOnSuccess ?? formEngineSetup?.onSuccess;
+  const onError = directOnError ?? formEngineSetup?.onError;
+  const navigate = directNavigate ?? formEngineSetup?.navigate;
+  const resetOnSuccess = directResetOnSuccess ?? formEngineSetup?.resetOnSuccess;
+  const externalUploadTokens = directUploadTokens ?? formEngineSetup?.uploadTokens;
+  const externalOnFileUpload = directOnFileUpload ?? formEngineSetup?.onFileUpload;
+  const externalOnFileRemove = directOnFileRemove ?? formEngineSetup?.onFileRemove;
+  const externalIsUploading = directIsUploading ?? formEngineSetup?.isUploading;
+  const externalUploadProgress = directUploadProgress ?? formEngineSetup?.uploadProgress;
   const {
     styleRules: userStyleRules,
     formLayout = "standard",
@@ -839,16 +857,21 @@ function FormEngine({
     submitButtonSetup
   } = formLayoutSettings ?? {};
   const isButtonGroup = formLayout === "button-group";
+  const formFields = React2__namespace.useMemo(() => {
+    if (fields && fields.length > 0) return fields;
+    if (defaultFields && defaultFields.length > 0) return defaultFields;
+    return [];
+  }, [fields, defaultFields]);
   const styleRules = React2__namespace.useMemo(
     () => ({
-      formContainer: userStyleRules?.formContainer ?? DEFAULT_STYLE_RULES.formContainer,
-      fieldsContainer: userStyleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES.fieldsContainer,
-      fieldClassName: userStyleRules?.fieldClassName ?? DEFAULT_STYLE_RULES.fieldClassName,
-      formClassName: userStyleRules?.formClassName ?? DEFAULT_STYLE_RULES.formClassName,
-      successMessageClassName: userStyleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES.successMessageClassName,
-      errorMessageClassName: userStyleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES.errorMessageClassName
+      formContainer: userStyleRules?.formContainer ?? defaultStyleRules?.formContainer ?? DEFAULT_STYLE_RULES.formContainer,
+      fieldsContainer: userStyleRules?.fieldsContainer ?? defaultStyleRules?.fieldsContainer ?? DEFAULT_STYLE_RULES.fieldsContainer,
+      fieldClassName: userStyleRules?.fieldClassName ?? defaultStyleRules?.fieldClassName ?? DEFAULT_STYLE_RULES.fieldClassName,
+      formClassName: userStyleRules?.formClassName ?? defaultStyleRules?.formClassName ?? DEFAULT_STYLE_RULES.formClassName,
+      successMessageClassName: userStyleRules?.successMessageClassName ?? defaultStyleRules?.successMessageClassName ?? DEFAULT_STYLE_RULES.successMessageClassName,
+      errorMessageClassName: userStyleRules?.errorMessageClassName ?? defaultStyleRules?.errorMessageClassName ?? DEFAULT_STYLE_RULES.errorMessageClassName
     }),
-    [userStyleRules]
+    [userStyleRules, defaultStyleRules]
   );
   const {
     uploadTokens: internalUploadTokens,
@@ -864,7 +887,7 @@ function FormEngine({
   const onFileUpload = externalOnFileUpload ?? internalUploadFiles;
   const onFileRemove = externalOnFileRemove ?? internalRemoveFile;
   const { form, submissionError, formMethod, resetSubmissionState } = useContactForm({
-    formFields: fields,
+    formFields,
     formConfig: api,
     onSubmit,
     onSuccess: (data) => {
@@ -899,7 +922,7 @@ function FormEngine({
     chunkL4I35PDU_cjs.Form,
     {
       form,
-      fields: isButtonGroup ? fields : void 0,
+      fields: isButtonGroup ? formFields : void 0,
       formConfig: legacyFormConfig,
       method: formMethod,
       notificationConfig: {
@@ -917,11 +940,11 @@ function FormEngine({
       "div",
       {
         className: chunkQMWZLGON_cjs.cn(
-          "grid grid-cols-12 gap-6",
+          "grid grid-cols-12 gap-6 md:gap-10",
           styleRules?.fieldsContainer
         )
       },
-      fields.map((field) => /* @__PURE__ */ React2__namespace.createElement(
+      formFields.map((field) => /* @__PURE__ */ React2__namespace.createElement(
         "div",
         {
           key: field.name,