@page-speed/forms 0.7.6 → 0.7.8

package/dist/inputs.cjs

@@ -1,53 +1,53 @@
 'use strict';
 
-var chunkK7ZHLPLX_cjs = require('./chunk-K7ZHLPLX.cjs');
+var chunkDDPQKEUI_cjs = require('./chunk-DDPQKEUI.cjs');
 var chunkIGI4JJKE_cjs = require('./chunk-IGI4JJKE.cjs');
 
 
 
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
-  get: function () { return chunkK7ZHLPLX_cjs.Checkbox; }
+  get: function () { return chunkDDPQKEUI_cjs.Checkbox; }
 });
 Object.defineProperty(exports, "CheckboxGroup", {
   enumerable: true,
-  get: function () { return chunkK7ZHLPLX_cjs.CheckboxGroup; }
+  get: function () { return chunkDDPQKEUI_cjs.CheckboxGroup; }
 });
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
-  get: function () { return chunkK7ZHLPLX_cjs.DatePicker; }
+  get: function () { return chunkDDPQKEUI_cjs.DatePicker; }
 });
 Object.defineProperty(exports, "DateRangePicker", {
   enumerable: true,
-  get: function () { return chunkK7ZHLPLX_cjs.DateRangePicker; }
+  get: function () { return chunkDDPQKEUI_cjs.DateRangePicker; }
 });
 Object.defineProperty(exports, "FileInput", {
   enumerable: true,
-  get: function () { return chunkK7ZHLPLX_cjs.FileInput; }
+  get: function () { return chunkDDPQKEUI_cjs.FileInput; }
 });
 Object.defineProperty(exports, "MultiSelect", {
   enumerable: true,
-  get: function () { return chunkK7ZHLPLX_cjs.MultiSelect; }
+  get: function () { return chunkDDPQKEUI_cjs.MultiSelect; }
 });
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
-  get: function () { return chunkK7ZHLPLX_cjs.Radio; }
+  get: function () { return chunkDDPQKEUI_cjs.Radio; }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunkK7ZHLPLX_cjs.Select; }
+  get: function () { return chunkDDPQKEUI_cjs.Select; }
 });
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
-  get: function () { return chunkK7ZHLPLX_cjs.Switch; }
+  get: function () { return chunkDDPQKEUI_cjs.Switch; }
 });
 Object.defineProperty(exports, "TextArea", {
   enumerable: true,
-  get: function () { return chunkK7ZHLPLX_cjs.TextArea; }
+  get: function () { return chunkDDPQKEUI_cjs.TextArea; }
 });
 Object.defineProperty(exports, "TimePicker", {
   enumerable: true,
-  get: function () { return chunkK7ZHLPLX_cjs.TimePicker; }
+  get: function () { return chunkDDPQKEUI_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-DSK3VLIV.js';
+export { Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, MultiSelect, Radio, Select, Switch, TextArea, TimePicker } from './chunk-RNVK2DOS.js';
 export { TextInput } from './chunk-EQKN2OPX.js';
 //# sourceMappingURL=inputs.js.map
 //# sourceMappingURL=inputs.js.map

package/dist/integration.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkT2SLAP65_cjs = require('./chunk-T2SLAP65.cjs');
-var chunkK7ZHLPLX_cjs = require('./chunk-K7ZHLPLX.cjs');
+var chunkDDPQKEUI_cjs = require('./chunk-DDPQKEUI.cjs');
 var chunkIGI4JJKE_cjs = require('./chunk-IGI4JJKE.cjs');
 var React2 = require('react');
 var icon = require('@page-speed/icon');
@@ -440,6 +440,7 @@ function getColumnSpanClass(span) {
   const clamped = Math.max(1, Math.min(span, 12));
   return columnSpanClasses[clamped] || "col-span-12";
 }
+var FORM_GRID_FALLBACK_CSS = `[data-psf-grid]{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.5rem}@media(min-width:768px){[data-psf-grid]{gap:2.5rem}}[data-psf-col]{grid-column:span 12/span 12;min-width:0}@media(min-width:768px){[data-psf-col="1"]{grid-column:span 1/span 1}[data-psf-col="2"]{grid-column:span 2/span 2}[data-psf-col="3"]{grid-column:span 3/span 3}[data-psf-col="4"]{grid-column:span 4/span 4}[data-psf-col="5"]{grid-column:span 5/span 5}[data-psf-col="6"]{grid-column:span 6/span 6}[data-psf-col="7"]{grid-column:span 7/span 7}[data-psf-col="8"]{grid-column:span 8/span 8}[data-psf-col="9"]{grid-column:span 9/span 9}[data-psf-col="10"]{grid-column:span 10/span 10}[data-psf-col="11"]{grid-column:span 11/span 11}[data-psf-col="12"]{grid-column:span 12/span 12}}`;
 var DEFAULT_UPLOAD_ENDPOINT = "https://api.dashtrack.com/contacts/_/contact_form_uploads";
 function useFileUpload(options) {
   const [uploadTokens, setUploadTokens] = React2.useState([]);
@@ -668,7 +669,7 @@ function DynamicFormField({
   }, [field.type, field.options]);
   const fieldClassName = React2__namespace.useMemo(() => {
     if (usesChoiceCard) {
-      return "p-4 border rounded rounded-lg";
+      return "p-4 border rounded-lg";
     } else {
       return "";
     }
@@ -709,7 +710,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "textarea" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkK7ZHLPLX_cjs.TextArea,
+      chunkDDPQKEUI_cjs.TextArea,
       {
         ...formField,
         id: fieldId,
@@ -720,7 +721,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "select" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkK7ZHLPLX_cjs.Select,
+      chunkDDPQKEUI_cjs.Select,
       {
         ...formField,
         id: fieldId,
@@ -731,7 +732,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "multi-select" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkK7ZHLPLX_cjs.MultiSelect,
+      chunkDDPQKEUI_cjs.MultiSelect,
       {
         ...formField,
         id: fieldId,
@@ -742,7 +743,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "radio" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkK7ZHLPLX_cjs.Radio,
+      chunkDDPQKEUI_cjs.Radio,
       {
         ...formField,
         id: fieldId,
@@ -756,7 +757,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "checkbox" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkK7ZHLPLX_cjs.Checkbox,
+      chunkDDPQKEUI_cjs.Checkbox,
       {
         ...formField,
         id: fieldId,
@@ -770,7 +771,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "checkbox-group" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkK7ZHLPLX_cjs.CheckboxGroup,
+      chunkDDPQKEUI_cjs.CheckboxGroup,
       {
         ...formField,
         id: fieldId,
@@ -784,7 +785,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), (field.type === "date-picker" || field.type === "date") && /* @__PURE__ */ React2__namespace.createElement(
-      chunkK7ZHLPLX_cjs.DatePicker,
+      chunkDDPQKEUI_cjs.DatePicker,
       {
         ...formField,
         id: fieldId,
@@ -794,7 +795,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "date-range" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkK7ZHLPLX_cjs.DateRangePicker,
+      chunkDDPQKEUI_cjs.DateRangePicker,
       {
         ...formField,
         id: fieldId,
@@ -804,7 +805,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "time" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkK7ZHLPLX_cjs.TimePicker,
+      chunkDDPQKEUI_cjs.TimePicker,
       {
         ...formField,
         id: fieldId,
@@ -814,7 +815,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "file" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkK7ZHLPLX_cjs.FileInput,
+      chunkDDPQKEUI_cjs.FileInput,
       {
         ...formField,
         id: fieldId,
@@ -972,34 +973,44 @@ function FormEngine(props) {
       onNewSubmission: resetSubmissionState
     },
     !isButtonGroup && /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(
+      "style",
+      {
+        dangerouslySetInnerHTML: { __html: FORM_GRID_FALLBACK_CSS }
+      }
+    ), /* @__PURE__ */ React2__namespace.createElement(
       "div",
       {
+        "data-psf-grid": "",
         className: chunkIGI4JJKE_cjs.cn(
-          "grid grid-cols-12 space-y-8 gap-x-6 md:gap-x-8",
+          "grid grid-cols-12 gap-6 md:gap-10",
           styleRules?.fieldsContainer
         )
       },
-      formFields.map((field) => /* @__PURE__ */ React2__namespace.createElement(
-        "div",
-        {
-          key: field.name,
-          className: chunkIGI4JJKE_cjs.cn(
-            getColumnSpanClass(field.columnSpan ?? 12),
-            "min-w-0"
-          )
-        },
-        /* @__PURE__ */ React2__namespace.createElement(
-          DynamicFormField,
+      formFields.map((field) => {
+        const span = field.columnSpan ?? 12;
+        return /* @__PURE__ */ React2__namespace.createElement(
+          "div",
           {
-            field,
-            className: field.className ?? styleRules?.fieldClassName,
-            uploadProgress,
-            onFileUpload,
-            onFileRemove,
-            isUploading
-          }
-        )
-      ))
+            key: field.name,
+            "data-psf-col": String(span),
+            className: chunkIGI4JJKE_cjs.cn(
+              getColumnSpanClass(span),
+              "min-w-0"
+            )
+          },
+          /* @__PURE__ */ React2__namespace.createElement(
+            DynamicFormField,
+            {
+              field,
+              className: field.className ?? styleRules?.fieldClassName,
+              uploadProgress,
+              onFileUpload,
+              onFileRemove,
+              isUploading
+            }
+          )
+        );
+      })
     ), /* @__PURE__ */ React2__namespace.createElement(
       chunkIGI4JJKE_cjs.Button,
       {